CSS 伪元素工具提示与原始元素的宽度相同

Question

body {
 padding: 5px 10px;
 background-color: #E5E2D9FF;
}

abbr {position: relative}

abbr:hover:after {
  content: attr(title);
  position: absolute;
  color: #FFFFFFD7;
  background-color: #0000009C;
  padding: 2px 5px;
  bottom: 0; right: 0;
  transform: translate(100%, 100%);
  border-radius: 0 5px 5px 5px;
}

<h1>CSS Tooltips</h1>
 <h2>Simple tooltip</h2>
 <h3>With 'abbr' tag</h3>
 <p><abbr title="This is a simple tooltip">Lorem</abbr> ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati ea quae iste, voluptates nihil nesciunt laboriosam saepe magnam, odio molestiae architecto! Reprehenderit exercitationem magnam, illo possimus vero ducimus, commodi magni!</p>

我希望 :after 伪元素的宽度与原始元素不同。

谢谢:)

Answer 1

给伪元素设置一个宽度就行了

    body {
     padding: 5px 10px;
     background-color: #E5E2D9FF;
    }

    abbr {position: relative}

    abbr:hover:after {
      content: attr(title);
      position: absolute;
      color: #FFFFFFD7;
      background-color: #0000009C;
      padding: 2px 5px;
      bottom: 0; right: 0;
      transform: translate(100%, 100%);
      border-radius: 0 5px 5px 5px;
      white-space: nowrap;
    }

<h1>CSS Tooltips</h1>
<h2>Simple tooltip</h2>
<h3>With 'abbr' tag</h3>
<p><abbr title="This is a simple tooltip">Lorem</abbr> ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati ea quae iste, voluptates nihil nesciunt laboriosam saepe magnam, odio molestiae architecto! Reprehenderit exercitationem magnam, illo possimus vero ducimus, commodi magni!</p>

当然，你可以设置max/min-width，结合非宽度和white-space: no-wrap，如果你只是宽度未知的短文本，希望它们在一行等

CSS 伪元素工具提示与原始元素的宽度相同

CSS pseudo element tooltip has the same width as the original element

html

css

tooltip