Question

所以我在tumblr上有一个工具提示，除了最大宽度之外，关于代码的一切都工作正常，它被固定在75px。我已将其更改为250px和300px，但它拒绝使用工具提示中的文字进行拉伸。

代码：

＆＃13;

hashCode

＆＃13;

a[tooltip]:hover:after {
  position: absolute;
  z-index: 99999999;
  max-width: 300px;
  min-width: 60px;
  border: 1px solid #bababa;
  padding: 6px;
  margin: -27px 0px 0px 28px;
  background-color: #ffffff;
  color: #1a2242;
  font-family: arial;
  font-size: 7px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: none;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
  opacity: 1;
  content: attr(tooltip);
  transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
}

#s-m-t-tooltip {
  position: absolute;
  z-index: 99999999;
  max-width: 300px;
  min-width: 60px;
  border: 1px solid #bababa;
  padding: 6px;
  margin: -27px 0px 0px 28px;
  background-color: #ffffff;
  color: #1a2242;
  font-family: arial;
  font-size: 7px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: none;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
  opacity: 1;
  outline: 0px solid #ddd;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
}

＆＃13;

我们非常感谢您的帮助，如果您需要更多信息，请与我们联系。

Answer 1

为您的伪元素添加width: 100%;，您也可以使用box-sizing，以便width和height属性设置内容的维度而不是内容。 `

a[tooltip]:hover:after {
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  z-index: 99999999;
  max-width: 300px;
  min-width: 60px;
  border: 1px solid #bababa;
  padding: 6px;
  margin: -5px 0 0 28px;
  background-color: #ffffff;
  color: #1a2242;
  font-family: arial;
  font-size: 7px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: none;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
  opacity: 1;
  content: attr(tooltip);
  transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
}

#s-m-t-tooltip {
  position: absolute;
  z-index: 99999999;
  width: 300px;
  max-width: 200px;
  min-width: 60px;
  border: 1px solid #bababa;
  padding: 6px;
  margin: -27 0 0 28px;
  background-color: #ffffff;
  color: #1a2242;
  font-family: arial;
  font-size: 7px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: none;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
  opacity: 1;
  outline: 0px solid #ddd;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
}

<a href="#popup3" tooltip="words hooha haooo ahhahhhah ahahhahhah ahahhahaha hahahhahha ahahahhahha ahahhaha">Link</a>

Answer 2

它不起作用的原因是因为width:100%伪元素上设置了a:after。该属性会将元素的宽度设置为其父级的宽度，在这种情况下，您的a是<div class="markericon1">的子级。您可以看到，如果只将<div class="markericon1">的宽度更改为更高的值，您将获得所需的结果。

.markericon1 {
    width:300px;
}

html / css max-width无法正常工作

2 个答案: