CODEWITHSUNDEEP
cssline-breakspseudo-element
Haberg
Haberg

Reputation: 63

Prevent pseudo-element from breaking a line by itself

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>

Thanks for the help.

Upvotes: 5

Views: 1061

Answers (2)

Temani Afif
Temani Afif

Reputation: 272608

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.

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>

Upvotes: 4

zgood
zgood

Reputation: 12571

You could just wrap your last word in a <span>, then set that span to have the puesdo element and set it to white-space: nowrap;

Like this:

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

Upvotes: 2

Related Questions