CSS функция содержания подстроки

Question

content свойства вместе с :before и :after псевдо-элементами предлагает удобный способ создания малых и полезные деталей, как this one, где я генерировать пунктирный, книги в стиле список содержимого журнала.

Для вставки динамически созданного содержимого существуют функции, такие как attr() или counter(). В настоящее время, это требует размещения фактического содержания в отдельном атрибуте, то, что часто вызывает дублирование (например, когда я хочу content держать innerHTML значения узла-) мой код выглядит следующим образом

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