Question

Here i got the code.

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

只需将宽度设置为伪元素。

＆＃13;

    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;
    }

＆＃13;

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

＆＃13;

当然，您可以设置最大/最小宽度，与非宽度和white-space: no-wrap组合，如果您只有宽度未知的短文本并希望它们在一行上等等。

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

1 个答案: