وصف الدرس
ال Code الموجود في الدرس
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<div class="parent">
<div class="user">O</div>
<div class="one" data-text="Something">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore culpa dolores, autem voluptatum atque,
in dolore asperiores facilis libero dolorum magni iure doloribus quae pariatur! Similique ipsum nobis quos.
</div>
</div>
<div class="parent">
<div class="user">A</div>
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore culpa dolores, autem voluptatum atque,
in dolore asperiores facilis libero dolorum magni iure doloribus quae pariatur! Similique ipsum nobis quos.
</div>
</div>
<div class="parent">
<div class="user">E</div>
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore culpa dolores, autem voluptatum atque,
in dolore asperiores facilis libero dolorum magni iure doloribus quae pariatur! Similique ipsum nobis quos.
</div>
</div>
<ul>
<li>One</li>
<li>One</li>
<li>One</li>
<li>One</li>
<li>One</li>
</ul>
</body>
</html>.parent {
margin-bottom: 20px;
overflow: hidden;
counter-increment: members-counter;
}
.one {
background-color: #eee;
padding: 10px;
width: 600px;
float: left;
position: relative;
}
.one::before {
content: attr(data-text);
display: none;
}
.one::after {
content: counter(members-counter);
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
text-align: center;
font-weight: bold;
right: -10px;
top: 50%;
margin-top: -10px;
}
.user {
background-color: #eee;
width: 50px;
margin-right: 20px;
padding: 10px;
height: 55.5px;
float: left;
font-size: 50px;
text-align: center;
}
ul {
list-style: none;
}
ul li {
position: relative;
}
ul li::before {
content: "";
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 50%;
margin-top: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent #009688 transparent transparent;
}