Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Height and Span

Can we set height to span?

Can we set height to span? The answer is no. Span is an inline element. If you provide height to span, there will not be any effect. If you really want to set height then you will have to add  display : inline-block or display : block.

Draw Triangle or Arrow Using DIV ::after CSS HTML

Draw Triangle or Arrow Using DIV ::after CSS HTML



Suppose we want to add an arrow to bottom of div or any other element, just add the css below.


#divid::after{
position:absolute;
border-top:25px solid #f00;
border-left:25px solid transparent;
border-right:25px solid transparent;
border-bottom:25px solid transparent;
content:'';
display:inline-block;
border-right-width:25px;
top:50px;
left:25px;
box-sizing:border-box;
}



example:


<!DOCTYPE html>
<html lang="en">
<head>
<style>

#id1::after{
position:absolute;
border-top:25px solid #f00;
border-left:25px solid transparent;
border-right:25px solid transparent;
border-bottom:25px solid transparent;
content:'';
display:inline-block;
border-right-width:25px;
top:50px;
left:25px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="id1"></div>
</body>
</html>


Demo: