如何为消息栏自动保留边距

Question

我正在尝试制作一个在悬停时取代的消息。 我的代码：

CSS：

.showtext:hover:before {
content: attr(data-content);
padding: 0.8em 1em;
position: absolute;
color: #fff;
background: #47a3da;
margin-left: 5%;
}

HTML

<span class="showtext" data-content="Message">Hover Me</span>

我已将margin-left设置为5%，但它并非始终有效。当跨度内的文字较长时，它会重叠，那么如何将其设置为自动margin-left一点，比如10px？

我试图设置为auto，但它没有用。 另外，如何在消息的左侧添加一个三角形，使其指向范围文本。

Answer 1

此处，margin-left应用于.showtext元素的左边缘。您要做的是显示右侧边缘5％的框，而不是。

只需将:before选择器更改为:after即可解决您的问题，以便在元素之后应用而不是之前的 它

至于你的第二个问题，我建议你搜索SO;它已被不止一次回答（我知道;我已经看到了这些问题）。