html - 我想从其中的 img 中删除链接样式

Question

我正在做一个元素，客户可以在其中创建自己的内容，因此他在我设置样式的链接 (<img>) 中添加了一张图片 (<a>)。

我试图不在此图像中使用样式，但它不起作用，因为 img在<a>里面标签，因此它继承了 a 的样式.也许您知道使用 SASS 的另一种方法？

• 我试图取消 img 的样式那在里面a但没有成功。
• 我也试过这个:Removing dotted underline from linked 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 function

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 element 中

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>

或者您可以使用 Aspect ratio (image)

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>