Текст CSS, подчеркивающий слишком долго, когда применяется интервал между буквами?

это не идеально, но лучшее решение, которое я придумал до сих пор, - это замаскировать его :после псевдо-элемента. Таким образом, нет необходимости в дополнительных элементах по всему тексту.

например:

h1 {
  /* A nice big spacing so you can see the effect */
  letter-spacing: 1em;
  /* we need relative positioning here so our pseudo element stays within h1's box */
  position: relative;
  /* centring text throws up another issue, which we'll address in a moment */
  text-align: center;
  /* the underline */
  text-decoration: underline;
}

h1:after {
  /* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
  position: absolute;
  /* the same width as our letter-spacing property on the h1 element */
  width: 1em;
  /* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
  height: 200%;
  /* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
  background-color: #990000;
  /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
  content: ".";
  /* hide the dynamic text you've just added off the screen somewhere */
  text-indent: -9999em;
  /* this is the magic part - pull the mask off the left and hide the underline beneath */
  margin-left: -1em;
}

<h1>My letter-spaced, underlined element!</h1>

и это все!

вы can также используйте границы, если вы хотите более точный контроль над цветом, позиционированием и т. д., Но они требуют добавления элемента span, если у вас нет фиксированной ширины.

например, я в настоящее время работает над сайтом, который требует, чтобы элементы h3 имели интервал между буквами 2px, центрированный текст и подчеркивание с добавленным пространством между текстом и подчеркиванием. Мой css выглядит следующим образом:

h3.location {
  letter-spacing: 2px;
  position: relative;
  text-align: center;
  font-variant: small-caps;
  font-weight: normal;
  margin-top: 50px;
}

h3.location span {
  padding-bottom: 2px;
  border-bottom: 1px #000000 solid;
}

h3.location:after {
  position: absolute;
  width: 2px;
  height: 200%;
  background-color: #f2f2f2;
  content: ".";
  text-indent: -9999em;
  margin-left: -2px;
}

и мой HTML:

<h3><span>Heading</span></h3>

Примечания:

это не 100% довольно CSS, но это, по крайней мере, означает, что вам не нужно изменять и взломать HTML для достижения того же результата.

мне еще не приходилось пробовать это на элементе с фоновым изображением, поэтому еще не придумали, как этого добиться.

центрирование текста заставляет браузер отображать текст в неправильном месте (он учитывает текст + дополнительный интервал после этого), поэтому все тянется влево. Добавление отступа текста 0.5 em (половина интервала между буквами 1em, который мы использовали в верхнем примере) непосредственно на элементе h1 (не :после псевдо-элемента) должны исправьте это, хотя я еще не тестировал это.

любая обратная связь с благодарностью принято!

Нил

вы также можете использовать абсолютный позиционированный псевдоэлемент для достижения подчеркивания и противостоять смещению, указав его с помощью свойства left и right. НАЖМИТЕ НИЖЕ для примера.

<span style="letter-spacing: 5px; position: relative">My underlined text</span>

span:after {
    content: '';
    border-bottom:1px solid #000;
    display: block;
    position: absolute;
    right: 5px;
    left: 0;
}

https://codepen.io/orangehaze/pen/opdMoO

насколько я знаю, вы ничего не можете сделать об этом. Я думаю, что большинство браузеров добавляют интервал между буквами после каждой буквы, включая последнюю. Нет никаких свойств CSS, которые предлагают более точный контроль над интервалом между буквами.

это, кажется, решает проблему, вроде бы, в Firefox 3.6 на моем Mac,но это не супер-практично делать это для каждого подчеркнутого элемента.

<span style="border-bottom: 1px solid black;">
    <span style="letter-spacing: 1em;">Tes</span>t
</span>

Спасибо за ответы, я полагаю, что это ограничение css / html. К счастью, эти ссылки были введены через php, поэтому я написал сценарий, чтобы окружить их соответствующим образом, хотя и не совсем идеальное решение, оно работает:

$part1 = substr($string, 0, -1);
$part2 = substr($string, -1);
$full = "<span style='letter-spacing: 1em'>".$part1."</span><span>".$part2."</span>";

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

слишком плохой контроль для подчеркиваний довольно ограничен html / css (особенно пытается определить расстояние между строкой и текстом, толщину и т. д.), Но я полагаю, что это работает сейчас.

если вы не хотите разделить последнюю букву "Test", вы можете просто обернуть ее span и этого:

span {
    letter-spacing: 1.1em;
    margin-right: -1.1em;
}

как вы можете видеть, он даже работает с эластичными блоками. Если нет пользовательского поля на a, вы можете пропустить добавление span и применить этот стиль непосредственно a

это творит чудеса для меня =)

Я бы не сломался tex<span>t</span> по причинам SEO, поэтому я предпочитаю заменить подчеркивание поддельным. CSS calc может помочь вам с его шириной.

a{
  text-decoration:none;
  letter-spacing:15px;
  color:red;
  display:inline-block;
}

a .underline{
  height:2px;
  background-color:red;
  width: calc(100% - 15px); /*minus letter spacing*/
}

<a href="#">Text
<div class="underline"></div></a>