Различное семейство шрифтов для двух разных частей одной строки - PullRequest
Новая
       19

Различное семейство шрифтов для двух разных частей одной строки

1 голос
/ 19 июня 2019 
.my-link::after {
    content: "text \2661";
    font-family: Arial,sans-serif;
}

Глядя на код выше, мне нужно установить семейство шрифтов для содержимого псевдоэлемента. Это не будет проблемой.

Но мне нужно установить семейство шрифтовдля части text для Arial и семейства шрифтов для части \ 2661 для Helvetica.

В основном два разных семейства шрифтов для разных частей одной и той же строки.

Есть ли способ достичь этого только с помощью CSS или Sass?

В противном случае я могу просто подумать о настройке семейства шрифтов для всего содержимого псевдоэлементачерез CSS в Arial, а затем напишите функцию JavaScript, которая просматривает строку внутри содержимого псевдоэлемента, находит часть \ 2661 и изменяет ее семейство шрифтов на Helvetica.

Будем благодарны за любые предложения, идеи, подсказки и т. Д.

1 Ответ

1 голос
/ 19 июня 2019

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

https://jsfiddle.net/zxwkjmt3/

Это работает при условии, что ваши ссылки display:inline-block;

.my-link {
  display: inline-block;
}

.my-link::before {
    content: '\2661';
    float: right;
    font-family: Helvetica,sans-serif;
}
.my-link::after {
    content: 'text';
    float: right;
    font-family: Arial,sans-serif;
}
<a href="#" class="my-link">Link</a>

Редактировать: Стоит отметить, избегайте думать о псевдо-элементах как о вложенных элементах, это не так. Они дадут немного больше гибкости, но они ограничены в том, что вы можете сделать, если вложение вложенных элементов дает вам наибольшую гибкость.

...