Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.12.2023, 15:03
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,740

Убрать подчеркивание с псевдоэлемента
Такой макет
<head>
<style>
	.und {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}
	.num {
		text-decoration: none;
	}
	.num::after {
		content: "( " attr(data-num) " )";
		text-decoration: none;
    }
}

</style>
</head>
<body>
Lorem ipsum dolor sit amet, 
<span class="und">
	consectetur adipiscing
	<span class="num" data-num="1742"></span>
	elit
</span>
, sed do eiusmod tempor ...
</body>


Как бы убрать подчеркивание с псевдоэлемента (выводится как "( 1742 )" ) ?

text-decoration:none;
в .num и .num::after не помогают.
Ответить с цитированием
  #2 (permalink)  
Старый 12.12.2023, 16:35
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,555

Никак, это underline родителя(что можно увидеть поменяв, например, цвет).
Либо менять вёрстку, либо костылить добавив элементу underline цвета фона, чтоб перекрывал родительский.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 12.12.2023, 16:58
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,740

Проблема решена. Теории не знаю, но помог display: inline-block;
Так работает
<head>
<style>
	.und {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}
	.num {
		text-decoration: none;
		display: inline-block;
	}
	.num::after {
		content: "( " attr(data-num) " )";
		text-decoration: none;
    }
}

</style>
</head>
<body>
Lorem ipsum dolor sit amet, 
<span class="und">
	consectetur adipiscing
	<span class="num" data-num="1742"></span>
	elit
</span>
, sed do eiusmod tempor ...
</body>


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

Последний раз редактировалось voraa, 12.12.2023 в 20:02.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать возможность печати и скачивание у iframe type="application/pdf" Artur_Hopf Общие вопросы Javascript 1 11.12.2018 01:12
Не миогу убрать сообщение "Чтобы отобразить эту страницу firefox долже Sergey999 Оффтопик 6 29.05.2018 12:22
Убрать display none в последнем элементе SLameN Элементы интерфейса 4 14.08.2015 18:12
Как убрать выделение в Опере у div, получившего фокус ? spa_2002 Opera, Safari и др. 5 03.09.2009 10:42
Не подскажите, как убрать подчеркивание ссылки href? Forgott Общие вопросы Javascript 1 20.05.2008 11:47