У меня есть текст логотипа в теге привязки и логотип текста, чтобы иметь первую букву красного слова.создание первой буквы каждого слова цвет css
<a href="http://frobbeintl.com" title="">FLETCHER ROBBE INTERNATIONAL LLP</a>
Как ниже изображения:
Я использовал срок, но не кажется, что работает в моем сценарии. Может ли кто-нибудь указать мне на какой-то подход CSS? Благодаря
Хотя вы можете использовать это свойство
a::first-letter {
color: red;
}
Но заметьте, это будет применяться к самому первому слову в гиперссылке, а не в слове.
Вот документ для этого http://css-tricks.com/almanac/selectors/f/first-letter/
Да, я пробовал это, но это не мое решение. –
Применяется к самой первой букве, которую вы имеете в виду. – melancia
Да, это применимо только к самой первой букве внутри элемента, а не к каждой первой букве в слове в гиперссылке. Вы можете снова использовать пролеты! –
Это лучшее, что вы можете сделать для встроенных элементов в чистом HTML + CSS:
<a class = "name" href="http://frobbeintl.com" title="">
<span>F</span>letcher
<span>R</span>obbe
<span>I</span>nternational
<span>LLP</span<
</a>
CSS:
.name {
text-transform: uppercase;
}
.name span {
color: red;
}
Вы можете использовать
< - только для блочных элементов::first-letter селектор, как в
CSS-Tricks.
Вы можете изменить свой код на следующее:
<a href="http://frobbeintl.com" title=""><span>F</span>LETCHER <span>R</span>OBBE <span>I</span>NTERNATIONAL <span>LLP</span></a>
Имея, что вы можете стилизовать пролеты по-разному. С точки зрения разметки это прекрасно, потому что диапазон не имеет смысла. Используя эту технику и ids/nth-child, вы даже можете задуматься над каждой буквой по-разному. Как вы видите, это становится очень уродливым очень быстро - поэтому кто-то создал небольшой плагин jQuery, чтобы сделать это за вас: http://letteringjs.com/
Надеюсь, что это поможет.
http://reference.sitepoint.com/css/pseudoelement-firstletter –
Как вы различаете слово (Flecther) и аббревиатуру (LLP)? –
@Sean Bright: нет такого способа различать эти буквы –