Я хочу удалить стиль ссылки из img в нем

Question

Я работаю над проектом, в котором клиент может создавать свой собственный контент, поэтому он добавил изображение (<img>) в ссылку (<a>), которую я стилизовал.

Япытается не использовать стиль в этом изображении, но это не работает, потому что img находится внутри тега <a>, поэтому он наследует стиль от a. Может быть, вы знаете другой способ сделать это с помощью SASS?

• Я пытался удалить img изнутри a, но безуспешно.
• Я также попробовал это: Удаление пунктирного подчеркивания из связанного img

Вот кодовая ручка: https://codepen.io/Gabrielsen/pen/rNNaEvb

И фрагмент:

a {
  font-family: sans-serif;
  color: black;
  font-size: 2rem;
  text-decoration: none;
  transition: 0.5s;
  border-bottom-width: 0.2rem;
  border-bottom: solid .2rem green;
}

a img {
  width: auto;
  height: 5rem;
}

a:hover,
a:focus,
a:active {
  box-shadow: inset 0 -0.5rem 0 green;
  border-color: green;
}

// I want remove the style of the a from the img but I can't do this because her parent is the link and he have the style : 
a img,
a:hover img,
a:focus img,
a:active img {
  border-bottom-width: 0;
  box-shadow: none;
}

<a href="#">
  <img src="https://cdn.vox-cdn.com/thumbor/heXu37IbDvVy6Qbo1wbPjNvi6Ys=/0x0:712x423/1200x800/filters:focal(385x120:497x232)/cdn.vox-cdn.com/uploads/chorus_image/image/55531035/Screen_Shot_2017_06_30_at_3.17.00_PM.0.png" alt="Juste... Pickle-rick"> My
  link from the hell
</a>

Нет сообщений об ошибках, только мои слезы.

Answer 1

Я порекомендую вам перейти к ширине изображения вместо высоты и установить height: auto;, а затем использовать функцию calc

a {
  font-family: sans-serif;
  color: black;
  font-size: 2rem;
  text-decoration: none;
  position: relative;
}
a:after{
  content: "";
  position:absolute;
  bottom: 0;
  right:0px;
  height: 1rem;
  width: calc(100% - 5rem);/* 100% - (width of the image)*/
  transition: 0.5s;
  border-bottom-width: 0.2rem;
  border-bottom: solid .2rem green;
}
a img {
  height: auto;
  width: 5rem;
}

a:hover:after,
a:focus:after,
a:active:after {
  box-shadow: inset 0 -0.5rem 0 green;
  border-color: green;
}

a img,
a:hover img,
a:focus img,
a:active img {
  border-bottom-width: 0;
  box-shadow: none;
}

<a href="#">
  <img src="https://cdn.vox-cdn.com/thumbor/heXu37IbDvVy6Qbo1wbPjNvi6Ys=/0x0:712x423/1200x800/filters:focal(385x120:497x232)/cdn.vox-cdn.com/uploads/chorus_image/image/55531035/Screen_Shot_2017_06_30_at_3.17.00_PM.0.png" alt="Juste... Pickle-rick"> My
  link from the hell
</a>

Вы можете заключить текст в элемент span

a {
  font-family: sans-serif;
  color: black;
  font-size: 2rem;
  text-decoration: none;
}
a span{
  transition: 0.5s;
  border-bottom: solid .2rem green;
}

a img {
  width: auto;
  height: 5rem;
}

a:hover span,
a:focus span,
a:active span{
  box-shadow: inset 0 -0.5rem 0 green;
  border-color: green;
}
  
a img,
a:hover img,
a:focus img,
a:active img {
  border-bottom-width: 0;
  box-shadow: none;
}

<a href="#">
  <img src="https://cdn.vox-cdn.com/thumbor/heXu37IbDvVy6Qbo1wbPjNvi6Ys=/0x0:712x423/1200x800/filters:focal(385x120:497x232)/cdn.vox-cdn.com/uploads/chorus_image/image/55531035/Screen_Shot_2017_06_30_at_3.17.00_PM.0.png" alt="Juste... Pickle-rick"> <span>My link from the hell</span>
</a>

или вы можете использовать Соотношение сторон (изображение)

a {
  font-family: sans-serif;
  color: black;
  font-size: 2rem;
  text-decoration: none;
  position: relative;
}
a:after{
  content: "";
  position:absolute;
  bottom: 0;
  right:0px;
  height: 1rem;
  width: calc(100% - 5rem*1.5);/* 100% - (height of the image)x1.5*/
  transition: 0.5s;
  border-bottom-width: 0.2rem;
  border-bottom: solid .2rem green;
}
a img {
  width: auto;
  height: 5rem;
}

a:hover:after,
a:focus:after,
a:active:after {
  box-shadow: inset 0 -0.5rem 0 green;
  border-color: green;
}

a img,
a:hover img,
a:focus img,
a:active img {
  border-bottom-width: 0;
  box-shadow: none;
}

<a href="#">
  <img src="https://cdn.vox-cdn.com/thumbor/heXu37IbDvVy6Qbo1wbPjNvi6Ys=/0x0:712x423/1200x800/filters:focal(385x120:497x232)/cdn.vox-cdn.com/uploads/chorus_image/image/55531035/Screen_Shot_2017_06_30_at_3.17.00_PM.0.png" alt="Juste... Pickle-rick"> My
  link from the hell
</a>

Answer 2

Вы не можете сделать это, если изображение не расположено абсолютно или другим способом не можете добавить margin-bottom: -0.5rem;к изображению, которое скрывает границу

Answer 3

Добавьте класс к вашей якорной ссылке следующим образом:

<a class="myLink" href="#">
  <img src="https://cdn.vox-cdn.com/thumbor/heXu37IbDvVy6Qbo1wbPjNvi6Ys=/0x0:712x423/1200x800/filters:focal(385x120:497x232)/cdn.vox-cdn.com/uploads/chorus_image/image/55531035/Screen_Shot_2017_06_30_at_3.17.00_PM.0.png" alt="Juste... Pickle-rick"> My
  link from the hell
</a>

Затем настройте эту ссылку с помощью этого CSS:

.myLink {
border:none;
}