Instead of JavaScript, CSS also can do some tricks to make magic happen. CSS can maintain counter variables to inrease the value, and also add some content before and after a block, emphasize first letter of a paragraph, mandatory fields validation, etc. Counters Demo 1 Effect Code <head> <style> body { counter-reset:sec-counter; /* Set "sec-counter" to 0 */ } h2::before { counter-increment:sec-counter; /*Increment "sec-counter" by 1*/ content:"Section " counter(sec-counter) ". "; } </style> </head> <body> <h2>HTML Tutorial</h2> <h2>CSS Tutorial</h2> <h2>JavaScript Tutorial</h2> <h2>Bootstrap Tutorial</h2> <h2>SQL Tutorial</h2> <h2>PHP Tutorial</h2> </body> Demo 2 Effect Code <head> <style> body{ counter-reset:section; /* define counter */ counter-reset:heading; } h1:before{ counter-increment: heading; content:counter(heading) " - "; } h1{ counter-reset: subheading; } h2:before{ content: counter(heading) "." counter(subheading) ") "; counter-increment: subheading; } h2{ counter-reset: section; /* define counter */ } h3:before{ content: counter(heading) "." counter(subheading) "." counter(section) ") "; /*content: counter(section) ": ";*/ counter-increment: section; } </style> </head> <body> <h3>Heading 3, no counter</h3> <h3>Heading 3, no counter</h3> <h1>Heading 1</h1> <h2>Subheading</h2> <h2>Subheading</h2> <h3>Heading 3</h3> <h3>Heading 3</h3> <h1>Heading 1</h1> <h2>Subheading</h2> <h2>Subheading</h2> </body> Demo 3 Effect Code <dhead> <style> ol{ counter-reset: counter; list-style-type: none; } li::before{ counter-increment: counter; content: counters(counter, ".") " "; } </style> </head> <body> <ol> <li>item</li> <li>item</li> <ol> <li>item</li> <li>item</li> <li> <ol> <li>item</li> <li>item</li> <li>item</li> </ol> </li> <li>item</li> </ol> <li>item</li> <li>item</li> </ol> <ol> <!-- restart counter --> <li>item</li> <li>item</li> </ol> </body> Mask Effect Code <head> <style> body{ background-color: rgb(124, 156, 216); } img{ width:900px; mask-image:linear-gradient(to top,transparent 25%, rgb(50, 13, 184) 75%); -webkit-mask-image: linear-gradient(to left,transparent 25%, #000 75%); } </style> </head> <body> <img src="toronto city hall.jpg"> </body> First Letter…
Notice the difference between the two checkbox. Change stylesheet "-webkit-appearance" value to checkbox would fix. Fixed:
(Reveal tech behind) Noticed that some web sites restrict their contents from fully readable, e.g. WallStreet web site articles. It used stylesheet to accomplesh this effect: .wsj-snippet-body{ position: relative; } .wsj-snippet-body:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 136px; background: rgba(255, 255, 255, .2); /* fallback for gradient */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)),to(rgba(255, 255, 255, 1))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%); } Effect: Full solution: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .wsj-snippet-body{ position: relative; } .wsj-snippet-body:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 136px; background: rgba(255, 255, 255, .2); /* fallback for gradient */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)),to(rgba(255, 255, 255, 1))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%); } </style> </head> <body> <div class="wsj-snippet-body"> <p>这些人士称，他们讨论的想法包括扩大东南亚（可能是新加坡）的业务以及在美国重塑其品牌。扩大东南亚业务将使该公司高管能够使该应用远离中国。</p> <p>与此同时，据了解该公司做法的人士称，TikTok还减少了其应用上来自中国的内容数量，以期减少提醒美国用户该应用源自中国。</p> <p>TikTok母公司北京字节跳动科技有限公司(Beijing...</p> </div> </body>