Question

content属性以及:before和:after伪元素提供了一种方便的方法来创建小而有用的详细信息，例如this one，其中我生成点缀，书籍 - 样式列表的期刊内容。

有attr()或counter()等功能可插入动态生成的内容。目前，这需要将实际内容放在单独的属性中，这通常会导致重复（例如，当我希望content保存节点的innerHTML值）时，我的代码看起来像这样< / p>

<a data-page="148" href="/archive/70/2/148"></a>

有没有办法可以通过data-page解析href属性来消除它？在CSS中使用这样的东西会很酷：

content: substr(attr(href), lastIndexOf(attr(href), '/'));

甚至更好用正则表达式：

content: match(attr(href), /\d+$/);

Answer 1

正如您所注意到的，CSS（目前）不够复杂，无法从属性中动态提取子字符串。

然而，javascript将使您能够从锚点中删除data-page属性，因此他们只需阅读：

<a href="/archive/70/2/148">

此外，以下CSS：

h4>a {
border-bottom: 1px dotted black;
}

将（以及其他一些调整）允许您跳过将省略号硬编码为::after内容。

见下面的例子：

var pageHref = [];
var pageNumber = [];

function assignPageNumbers() {
    var pages = document.querySelectorAll("h4>a");

    for (var i = 0; i < pages.length; i++) {
        pageHref[i] = pages[i].getAttribute("href");
        pageNumber[i] = pageHref[i].substr((pageHref[i].lastIndexOf("/")+1));
        document.styleSheets[0].insertRule("h4:nth-of-type(" + (i + 1) + ")>a::after {content: '" + pageNumber[i] + "'}", 0);
        }
    }

window.addEventListener('load',assignPageNumbers,false);

body {
width: 500px;
}

h4 {
position: relative;
}

h4>a {
color: black;
display: block;
font: 16px sans-serif;
text-decoration: none;
border-bottom: 1px dotted black;
}

h4>a span {
position: relative;
background:#fff;
top: 4px;
padding-right: 2px;
}

h4>a:after {
position: absolute;
right: 0;
margin-top: 4px;
background-color: rgb(255,255,255);
text-decoration: none;
}

h4>a:hover {
color: slategray;
border-bottom: 1px dotted slategray;
}

<h4>
    <a href="/archive/70/2/144">
        <span>A short title</span>
    </a>
</h4>
<h4>
    <a href="/archive/70/2/148">
        <span>Very long and incredibly verbose title that should, at the very least, span several lines or more to demonstrate wrapping</span>
    </a>
</h4>

CSS内容子串函数

1 个答案: