Можно ли убрать подчеркивание у изображений?

Question

[Eugene Chefranov]

Имеется оформление ссылок в параграфе:

p a:link {
    text-decoration: none;
    color: #507299;
    border-bottom: 1px dotted #507299;
}
p a:hover {
    color:#305075;
    border-bottom: 1px dotted #305075;
}

Всё хорошо, но если обернуть картинку ссылкой, то так как картинка является строчным элементом, то и к картинке применяется подчеркивание (border-bottom). Можно ли как-то избавиться от подчеркивание картинки в ссылке?

Пытался решить таким образом:

a img {
    text-decoration: none;
    border:  none;
}

но не помогло

Answer 1

[0xD34F]

Неудивительно, что не помогло - border-bottom вы определили для ссылки, а не изображения.

Определите класс для ссылок, содержащих изображение, и назначьте border: none ему:

.a-image {
  border: none;
}

<a class="a-image"><img src="...

Comments

[ElijahTr]

Не будет так работать :)
https://codepen.io/elijah_tr/pen/XzbxwL

[0xD34F]

ElijahTr, будет. Если :link к а не дописывать. Или определять класс как a.a-image.

Answer 2

[ElijahTr]

https://codepen.io/elijah_tr/pen/PJoOYp

Answer 3

[Max Kostikov]

border-bottom: none;