防止伪元素自己打断行

问题描述：

我有一个链接样式，该样式使用&::after在链接末尾添加了SVG箭头.问题在于，当视口更改大小时，有时只有SVG会中断一行.如何设置它，以使SVG始终在<a>标签中的最后一个单词处换行?

I have a link style that adds an SVG arrow at the end of the link using &::after. The problem is that when the viewport changes size there are times when just the SVG will break a line. How can I set it up so that the SVG always breaks the line with the last word in the <a> tag?

.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>

感谢您的帮助.

答

您可以添加等于图标大小的负边距，并在父元素上使用填充来纠正此问题.当我们到达第一个单词时，该技巧将使您能够中断，并且在逻辑上，图标也将随之出现.

You can add a negative margin equal to the icon size and use padding on the parent element to rectify this. This trick will enable the break when we reach the first word and logically the icon will follow.

我还删除了margin-left并增大了宽度，然后将背景位置向右调整.

I also removed the margin-left and made the width bigger then adjusted the backgound position to the right.

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>

相关推荐