摘要

我想添加一个右指向双角引号（»）按钮文本时，用户悬停在底部，使用平滑的CSS动画/过渡。

问题

我想在鼠标悬停在按钮上时，向按钮文本添加一个右双引号（»）。这很好用，请参阅下面的代码。然而，当我将鼠标移动到按钮上时，文本“跳跃”而不是平滑移动，尽管我添加了过渡。
https://www.w3schools.com/css/css3_buttons.asp上的动画按钮示例看起来很好，但不能很好地处理多行文本的按钮。

代码

你可以运行下面的代码片段。

html {
   font-family: Tahoma;
   margin: 0 5px 0 5px;
}

body {
   margin: 0;
}

.svgbutton {
   display: inline-block;
   border-radius: 4px;
   padding: 2px;
   width: 6em;
   box-shadow: 2px 2px 1px #efefef;
   color: black;
   border: 1px solid #dfdfdf;
   background-color: transparent;
   cursor: pointer;
   transition: 2s;
   vertical-align: top;
}

.svgbutton span {
   cursor: pointer;
   display: inline-block;
   border: thin solid red;
}

.svgbutton span::after {
   content: '';
   opacity: 0;
   border: thin solid blue;
}

.svgbutton:hover span {
}

.svgbutton:hover span::after {
   content: ' \00bb';
   opacity: 1;
   transition: 0.5s;
}

个字符
蓝色和红色框仅用于调试目的。
怎样才能使文章流畅呢？任何提示都值得赞赏.

接受答案后的最终代码

感谢Paulie_D的回答：对于感兴趣的人，请在这里找到我的最终代码：https://jsfiddle.net/uqgd8bav/