Summary with pseudo-element

Developer
Twikito
Size
2,971 Kb
Views
22,264
  1. Summary with pseudo-element Previews
  2. Summary with pseudo-element HTML Codes
  3. Summary with pseudo-element CSS Codes
  4. Summary with pseudo-element JS Codes

How do I make an summary with pseudo-element?

What is a summary with pseudo-element? How do you make a summary with pseudo-element? This script and codes were developed by Twikito on 11 September 2022, Sunday.

Summary with pseudo-element Previews
IQ Test

Summary with pseudo-element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Summary with pseudo-element</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul>	<li><a href="#" data-page="1">Lorem ipsum</a></li>	<li><a href="#" data-page="4">Delectus, sint</a></li>	<li><a href="#" data-page="5">Vel, illo</a></li>	<li><a href="#" data-page="8">Dolorem, excepturi</a></li>	<li><a href="#" data-page="11">Ab, reprehenderit</a></li>	<li><a href="#" data-page="13">Ipsum, adipisci</a></li>	<li><a href="#" data-page="17">Cumque, totam</a></li>	<li><a href="#" data-page="20">Incidunt, alias</a></li>	<li><a href="#" data-page="21">Itaque, necessitatibus</a></li>	<li><a href="#" data-page="25">Quidem, qui</a></li>
</ul> <script src="js/index.js"></script>
</body>
</html>

Summary with pseudo-element - Script Codes CSS Codes

ul { width: 60%; margin: auto; padding: 0; list-style: none;
}
li { margin: .5em 0;
}
a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; text-decoration: none; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out;
}
a::before { height: .1em; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; background: left bottom/contain repeat-x url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDIiPjxjaXJjbGUgZmlsbD0iI2ZmZiIgY3g9IjMuNSIgY3k9IjEiIHI9IjEiLz48L3N2Zz4=); content: '';
}
a::after { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; content: "p." attr(data-page);
}
a:hover, a:focus { color: black;
}
/* misc */
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; background: #3498db; color: white; font: 1.5em/1.4 "lato"; font-weight: 300;
}
a { color: inherit;
}

Summary with pseudo-element - Script Codes JS Codes

/*	NO JS!
*/
Summary with pseudo-element - Script Codes
Summary with pseudo-element - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 4
Size 2,971 Kb
Views 22,264
Do you need developer help for Summary with pseudo-element?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twikito (Twikito) Script Codes
Name
Beautiful Textual Map of the USA with CSS
Easy and Bulletproof ScrollTo Script
Picture hover effect with pseudo-elements
Easy CSS3 checkboxes and radio buttons
Image with hover CSS3 effect and full overlay
Image with hover CSS3 effect and bottom overlay
Input focus effect with only CSS
Breadcrum for shopping path with only css
CSS3 Box Shadows Effects
LavaLamp effect with CSS
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!