我有一个链接样式,使用&::after
在链路的末端增加一个SVG箭头。问题是,当视变化的大小有些时候只是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;
}
<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>
谢谢您的帮助。
您可以添加等于图标大小阴性切缘和使用填充父元素进行整治。当我们到达的第一个字和逻辑上的图标也会跟着这招将使突破。
我还除去margin-left
和所作的宽度大于调整背景位置到右侧。
p {
padding-right:22px;
}
.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-right:-32px;
width: 32px;
height: 15px;
content: "";
background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat right/contain;
}
<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>
你可以只换你最后一个字在<span>
,然后设置跨度有puesdo元素并将其设置为white-space: nowrap;
像这样:
.txtbtn {
font-size: 1.125rem;
line-height: 1.222222222;
letter-spacing: 2.57px;
color: orange;
text-decoration: none;
position: relative;
text-transform: uppercase;
}
.txtbtn span::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;
}
.txtbtn span {
white-space: nowrap;
}
<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur <span>abittor.</span></a></p>