Отображение значения атрибута данных с помощью CSS
Я использую плагин WordPress для отображения событий в календаре. Он имеет следующую разметку для отображения дней:
<th id = "tribe-events-monday" title = "Monday" data-day-abbr = "Mon">Monday</th>
Вместо отображения «Понедельник» я бы хотел, чтобы он отображал «Пн». Можно ли вывести атрибут данных (data-day-abbr) с помощью CSS?
Это был бы предпочтительный обходной путь, иначе мне нужно будет создать дочерние файлы шаблонов.
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
1 084
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
Получите доступ к data-day-abbr в CSS и установите его значение для псевдоэлемента (до):
#tribe-events-monday:before {
content: attr(data-day-abbr);
}
Ответ принят как подходящий
Вы можете сделать это, скрыв видимость содержимого th и заменив его с помощью CSS content и attr:
[data-day-abbr]:before {
content: attr(data-day-abbr);
visibility: visible;
}
th {
visibility: hidden;
}<table>
<tr>
<th id = "tribe-events-monday" title = "Monday" data-day-abbr = "Mon">Monday</th>
</tr>
</table>Отличный ответ. Правильно ли я думаю, что программы чтения с экрана по-прежнему будут иметь возможность читать дни недели?
—
25.06.2019 16:48
Что вы можете сделать, так это «скрыть» текст в th, установив его размер шрифта на ноль.
Затем добавьте элемент :after и заполните его атрибутом данных.
Больше информации
th {
border: 1px solid black;
font-size: 0;
}
th:after {
content: attr(data-day-abbr);
font-size: 12px;
}<table>
<tr>
<th id = "tribe-events-monday" title = "Monday" data-day-abbr = "Mon">Monday</th>
</tr>
</table>Вы можете использовать text-indent и ::before
[data-day-abbr] {
text-indent: -100vw;/* at least enough to hide text */
}
[data-day-abbr]::after {
content: attr(data-day-abbr);
float:left;/* or display: block;*/
text-indent: 0;
}<table>
<tr>
<table>
<tr>
<th title = "Monday" data-day-abbr = "Mon">Monday</th>
<th title = "Tuesday" data-day-abbr = "Tue">Tuesday</th>
<th title = "wednesday" data-day-abbr = "Wed">Wednesda</th>
<th title = "Thursday" data-day-abbr = "Thu">Thursday</th>
<th title = "friday" data-day-abbr = "Fri">friday</th>
<th title = "Saturday" data-day-abbr = "Sat">Saturday</th>
<th title = "Sunday" data-day-abbr = "Sun">Sunday</th>
</tr>
</table>
</tr>
</table>Другие вопросы по теме
Есть ли способ сделать логотип навигационной панели отзывчивым?
Применение CSS по отображаемому имени компонента?
Выравнивание метки флажка пользовательского интерфейса Fabric
Использование относительных размеров с единицами rem в Sapper
Навигация скользит снизу вверх, а затем появляется контент
Почему видимое переполнение означает, что высота svgs вычисляется неправильно, когда 100% - в FireFox?
Изменение наведения в Tailwindcss
Переместите большое изображение внутрь меньшего видимого контейнера
Стилизация элементов `::slotted()` из свойства статических стилей
Когда я изменяю размер логотипа навигации браузера и меню, они переходят друг в друга
Похожие вопросы
Есть ли способ сделать логотип навигационной панели отзывчивым?
Применение CSS по отображаемому имени компонента?
Выравнивание метки флажка пользовательского интерфейса Fabric
Почему видимое переполнение означает, что высота svgs вычисляется неправильно, когда 100% - в FireFox?
Различный вывод регистрации элемента в Chrome и IE
Исчезновение результатов SQL с помощью jQuery
Почему db:seed возвращает приложение/продукт класса не существует?
Переместите большое изображение внутрь меньшего видимого контейнера
Можно ли добавить новый экземпляр <td> в строку <tr> с помощью bs4?
Как решить, что «mat-list-option» является компонентом Angular?
Я рекомендую этот ответ как идеальный.