检查CSS标题属性是否为空，并添加内容

Question

我的目标是：检查title属性是否为空;如果不是那么应该添加此title属性的值加上连字符。另一方面，如果title属性为空，则根本不应添加“ - ”。

这是我目前的CSS代码：

div:hover::before{content:attr(title):not(attr(title)="") " - ";}

但它没有按预期工作。

例如：

<div title="My username">some text</div>

应在悬停时显示以下内容：

  

我的用户名 - 一些文字

但是如果：

<div title="">some text</div>

或（div上没有标题）：

<div>some text</div>

然后悬停时的显示应为：

  

一些文字

是否可以修复它？

Answer 1

您可以将属性选择器与attr()函数结合使用来实现此目的。 attr()函数只是抓取给定属性的值 - 它本身不支持任何条件语句。

请注意，我使用[title=""]和:not([title])来计算空标题属性以及完全没有title属性。您可以通过在第一个规则中添加:not()来省略[title]部分，但这在互联网E中不起作用 - 抱歉，我的意思是它不适用于 Chrome

div:hover::before {
    content: attr(title) " - ";
}

div[title=""]:hover::before, div:not([title]):hover::before {
    content: none;
}

<div title="My username">some text</div>
<div title="">some text</div>
<div>some text</div>