防止伪元素自己打断行 [英] Prevent pseudo-element from breaking a line by itself

问题描述

我有一个链接样式，该样式使用&::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>

这篇关于防止伪元素自己打断行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！