我有一个链接样式,使用 .在链接末尾添加一个 SVG 箭头&::after。问题是,当视口改变大小时,有时只有 SVG 会断线。如何设置才能使 SVG 始终与标签中的最后一个单词换行<a>?
.txtbtn {
font-size: 1.125rem;
line-height: 1.222222222;
letter-spacing: 2.57px;
color: orange;
text-decoration: none;
position: relative;
text-transform: uppercase;
}
.txtbtn::after {
position: relative;
top: 0;
display: inline-block;
margin-left: 12px;
width: 22px;
height: 15px;
content: "";
background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat center center;
background-size: contain;
}Run Code Online (Sandbox Code Playgroud)
<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>Run Code Online (Sandbox Code Playgroud)
谢谢您的帮助。