开发者

CSS: shortening the :before pseudo-element?

开发者 https://www.devze.com 2023-03-15 15:21 出处:网络
I\'m a bit of a beginner, and I\'m using :before for paragraph numbers. I have different styles for paragraphs, and I want some paragraphs to be numbered, and other paragraphs to be un-numbered. Here\

I'm a bit of a beginner, and I'm using :before for paragraph numbers. I have different styles for paragraphs, and I want some paragraphs to be numbered, and other paragraphs to be un-numbered. Here's a toy example: http://jsfiddle.net/afdBk/

My question is: do you know of a way to avoid putting the same lengthy :before litany after every paragraph type I want to be numbered? Could I simply make up a selector for it (something like .pgfno), put all the styling there, and then call back to this selector in the :befores? This would make things a lot cleaner and easier to re开发者_高级运维ad.

Thanks.


You can assign rules to multiple selectors at once: (jsFiddle)

.maintext p.type1:before, .maintext p.type2:before, .maintext p.type3:before {
    position: absolute;
    text-indent: 0px;
    left: 45px;
    padding-top: 1px;
    font-size: 80%;
    color: #888888;
    counter-increment: pgf;
}

You can also set several classes on one single element (jsFiddle):

.numbered:before {
    position: absolute;
    text-indent: 0px;
    left: 45px;
    padding-top: 1px;
    font-size: 80%;
    color: #888888;
    counter-increment: pgf;
    content: counter(pgf);
}

<p class="type1 numbered">Lorem ipsum dolor sit amet...</p>
0

精彩评论

暂无评论...
验证码 换一张
取 消