Как убрать подчеркивание у ссылки, если внутри есть другие блочные элементы?

Question

[Акваланг]

Использую бутстрап. Не хочу лишний раз писать скрипты по клику на блок, попробовал просто сделать ссылку с вложенными элементами и задать ей display: block;

Проблема: не убирается подчеркивание.

<a href="/projects/1" class="card mb-3 d-block card-a" style="width:45%; min-width: 300px; max-width: 540px;">
	<div class="row no-gutters">
		<div class="col-md-4">
			<img src="/img/backgrounds/hohloma_small.jpg" class="card-img" alt="Заголовок карточки">
		</div>
		<div class="col-md-8">
			<div class="card-body">
				<h5 class="card-title">Заголовок карточки</h5>
				<p class="card-text">
					<small class="text-muted">Кусочек текста</small>
				</p>
			</div>
		</div>
	</div>
</a>

.card-a * {
	/* Ссылка как карточка (.card + .d-block) */
	text-decoration: none;
}

!important не помогает, но и данное правило ничем не перебивается...

Результат (hover):


Как убрать подчеркивание? Насколько неправильно и насколько критично так делать с тегом A?

Answer 1

[frontend queen]

а про валидность и семантику слыхали? пихать блочные элементы внутрь инлайновых
дальше даже смотреть не буду

Comments

[Акваланг]

Ну а как сделать, чтобы целиком блок был как ссылка? Неужели только через JS?

[ThunderCat]

емнип это ограничение прошлого стандарта... С некоторого времени это является нормальной практикой и не противоречит валидности разметки.
Нашел вот:

Depending on the version of HTML you're catering to:
HTML 5 states that the<a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an<a>.

[frontend queen]

Дмитрий Фролов, проверьте без звездочки, у меня underline сбежал

.card-a {
  text-decoration: none;
}

блок ссылкой должен быть по дизайну? плохой дизайн. в крайнем случае - картинку/текст в заголовке карточки/тексте карточки оборачивать в ссылку на тот же урл

[Акваланг]

ThunderCat, меня поставил в сомнения автор первого комментария, и вы правы, с HTML5 это ограничение сняли.

[frontend queen]

ThunderCat, ага. и плевать на доступность, не говоря уже о здравом смысле

[Акваланг]

frontend queen, проверил в Хроме и ФФ, не сработало. Я с этого и начал, но как-то не работает. Интересно то, что нет других правил, которые бы перебивали это. То есть в режиме разработчика оно отмечено как активное.

[Акваланг]

frontend queen, короче звездочку убрал, добавил !important и помогло. Странно, до этого почему-то не срабатывало. А какие проблемы с доступностью могут быть?

[ThunderCat]

Дмитрий Фролов, как верно заметил frontend queen, у вас зачем-то звездочка после стиля(вы же его к текущему а пишете), примененного к а. Можно еще добавить для :hover такое же правило.

[ThunderCat]

frontend queen, ну да, ну да, картинки внутри ссылки? Да не, бред какой-то...

[frontend queen]

Дмитрий Фролов, не могу сказать, не вижу проблемы
https://jsbin.com/rikezaqoli/1/edit?html,css,output

[frontend queen]

ThunderCat, я про саму картинку ничего не говорил, она inline-block по дефолту
суть в дивах

[Шохрух Шаймардонов]

frontend queen, ну и что с дивами? Вот взял автор и диву задал также дисплэй: инлайн-блок. Что дальше?
По сути дивы не несут никакой никакую семантику

[frontend queen]

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

[Шохрух Шаймардонов]

frontend queen, с тем, что меньше использовать дивы, я с вами абсолютно согласен. Но касательно того, что менять нативные свойства, увы без этого никак. Не найдете сайт, у которого ни одно нативное свойство не перебито

[frontend queen]

Шохрух Шаймардонов, всё так и выходит, увы. но это не значит, что о семантически корректной вёрстке стоит забыть

[Шохрух Шаймардонов]

frontend queen, ну я с вами абсолютно солидарен в плане семантики. Сам часто матерюсь на верстку с дивами и неверное использование семантических тегов