小编Hab*_*erg的帖子

防止伪元素自行断行

我有一个链接样式,使用 .在链接末尾添加一个 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)

谢谢您的帮助。

css line-breaks pseudo-element

5
推荐指数
1
解决办法
855
查看次数

标签 统计

css ×1

line-breaks ×1

pseudo-element ×1