Передайте css ::после содержимого как определенное слово из имени класса

#html #css

Вопрос:

Я хочу передать ::after содержимое CSS в виде определенного слова из его элемента класса.

Если имена классов «язык-css», «язык-html» и т. Д., В этом случае я хочу передать содержимое как слово после «-«.

 code::before {
  content: attr(class);
}

 <code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>

Я знаю, что это возвращает весь текст из класса CSS, поддерживает ли CSS какую-либо функцию разделения, как это делает JavaScript?

1. Нет, CSS этого не поддерживает. Поместите нужный текст в a data-attribute и используйте вместо него это.

2. в качестве альтернативы вы также можете просто объявить текст в CSS напрямую, как: code.language-css::before { content: "CSS"; }

3. имя элемента и класса генерируется сторонним плагином, поэтому мы можем работать, если только скрипт.

4. @tacoshy использует код. язык-css::после очень сложно, потому что в цикле много языков.

5. при создании имени класса вы также можете сгенерировать атрибут данных language- и вместо использования класса для псевдоконтента использовать атрибут данных . Это может быть: data-langage="html"

Ответ №1:

В данном конкретном случае вы можете взломать is с некоторым отрицанием text-indent , если префикс всегда один и тот же. code Элемент использует моноширинный шрифт, поэтому его легко использовать ch .

 code::before {
  content: attr(class);
  display:inline-block;
  text-indent:-9ch; /* adjust this based on your real case */
  clip-path:inset(0); /* hide the overflow */
}

 <code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>

1. Это действительно хорошее решение, в данном случае оно будет работать, так как это будет всего 1 строка. Это не будет работать с многострочным текстом (просто как информация для всех остальных, кто наткнулся на это замечательное решение).

2. @cloned он работает с многострочным текстом, уменьшает ширину экрана, и текст будет обтекаться естественным образом

3. Вы правы, это действительно работает с многострочным текстом. Думал, что это сократит 10 символов в каждой строке. Я исправляюсь, спасибо за разъяснение. Отличное решение!