CSS动画线悬停生长

我有一个按钮，悬停时需要动画。下图显示了“阅读更多”一词，我希望右侧的黄线扩展到比悬停时的当前大小大约多50%

<a href="#" class="read_more">Read More </a> .read_more { font-family: "Gotham SSm A", "Gotham SSm B"; font-size: 20px; color: #002c77; letter-spacing: 0; text-align: center; line-height: 28px; font-weight: bold; text-transform: uppercase; } .read_more::after { content: "\2014"; color: #fcd450; }

.read_more{font family:“Gotham SSm A”，“Gotham SSm B”；字体大小：20px；颜色：#002c77；字母间距：0；文本对齐：居中；行高：28px；字体重量：粗体；文本转换：大写；}。read_more:{content:\2014；颜色：#fcd450；}

伪代码，因为看起来你什么都没有，但是

.line {
  width: 100px;
  transition: width .5s ease-in-out;
}
.line:hover {
  width: 150px;
}

---

见下文。希望这有帮助

。阅读更多信息{
字体系列：“高谭SSm A”、“高谭SSm B”；
字体大小：20px；
颜色：#002c77；
字母间距：0；
文本对齐：居中；
线高：28px；
字体大小：粗体；
文本转换：大写；
}
div{
位置：相对位置；
显示：内联块；
}
部门：之后{
内容：“；
高度：3倍；
宽度：20px；
背景色：红色；
位置：绝对位置；
右：-20px；
最高：50%；
转化：translateY（-50%）；
}
div:悬停：之后{
宽度：30px；
右：-30px；
}

---

基于您自己的代码，我认为这实现了您的目标！：）

一旦你把它粘贴到你自己的项目中，字体之类的东西就会起作用

。阅读更多信息{
字体系列：“高谭SSm A”、“高谭SSm B”；
字体大小：20px；
颜色：#002c77；
字母间距：0；
文本对齐：居中；
线高：28px；
字体大小：粗体；
文本转换：大写；
}
.阅读更多：之后{
内容：''；
位置：相对位置；
显示：内联块；
宽度：20px；
高度：2倍；
垂直对齐：顶部；
边缘顶部：12px；
背景色：#fcd450；
过渡：宽度0.3s；
}
.阅读更多：悬停：之后{
宽度：30px；
}

---

你试过什么吗？请附上您的代码。如何展开？在什么方面？所有维度？我应该添加我的代码，抱歉。阅读更多{字体系列：“Gotham SSm A”，“Gotham SSm B”；字体大小：20px；颜色：#002c77；字母间距：0；文本对齐：居中；行高：28px；字体重量：粗体；文本转换：大写；}。阅读更多：：在{内容：“\2014”；颜色：#fcd450；}之后，将此内容放入您的问题中，在评论部分，这一点都没有帮助