Предотвратить разрыв строки псевдоэлементом сам по себе

У меня есть стиль ссылки, который добавляет стрелку 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>

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

css line-breaks pseudo-element

06.02.2019 16:36

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

223

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете просто обернуть свое последнее слово в <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>

06.02.2019 16:47

Ответ принят как подходящий

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

Я также удалил 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>

06.02.2019 16:52

Другие вопросы по теме

<br /> не работает с вновь созданными элементами списка

Существует ли тип mime или расширение файла для списка "\n" или "значения, разделенные разрывом строки"?

Ожидаемый блок с отступом - продолжение строки?

Javascript / Php Как применить «\n» и «\r» в файле для загрузки

CSS - только перенос текста между элементами, а не символами (нельзя использовать пробел)

Как удалить разрывы строк и пустые строки из строки

Javascript — добавление разрывов строк в строки массива

'\ n' удаляется из поля ввода

На <p> нет разрыва строки, значение получено из текстового поля

Сохранять разрыв строки в текстовом поле при использовании mailto

Предотвратить разрыв строки псевдоэлементом сам по себе

Ответы 2

Другие вопросы по теме

Похожие вопросы