Не допускать, чтобы псевдоэлемент ломал строку сам - PullRequest
Новая
       26

Не допускать, чтобы псевдоэлемент ломал строку сам

0 голосов
/ 06 февраля 2019

У меня есть стиль ссылки, который добавляет стрелку 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;
}
<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Вы можете добавить отрицательное поле, равное размеру иконки, и использовать отступы для родительского элемента, чтобы исправить это.Этот трюк включит разрыв, когда мы дойдем до первого слова, и по логике будет следовать значок.

Я также удалил 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>
0 голосов
/ 06 февраля 2019

Вы можете просто заключить свое последнее слово в <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>
...