Can I achieve underline and circle with css?

You want to have this freehand drawing effect right?
with css you can only make exact shapes that are not as handmade.
this effect you can do in two ways:
-Use images as background in the case of the circle and as image (<img>) in the case of the underline
-Using canvas, is an extensive and complex subject but it is the best way to solve your problem if you think about good practices
An example of the first way:

<div class="wrapper-text">
    <p>text circle</p>
</div>

.wrapper-text {
    width: 100px //width and height a little bigger than p tag
    height: 80px;
    background-image: url('/path-image-circle.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

you can also place an image tag inside the wrapper with position: absolute and format the width and height instead of using as background

Browse More Popular Posts

Leave a Comment