Can I achieve underline and circle with css?

by

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

More Related Contents:

  1. How to disable text selection highlighting
  2. Difference between margin and padding?
  3. Common breakpoints for media queries on a responsive site
  4. In which order do CSS stylesheets override?
  5. iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
  6. Margin collapsing in flexbox
  7. Applying CSS styles only to certain elements
  8. How to insert a line break before an element using CSS
  9. Simulating transform-origin using translate
  10. How to only show certain parts with CSS for Print?
  11. Which HTML5 reset CSS do you use and why? [closed]
  12. Customize Bootstrap 4’s grid-system Breakpoints
  13. CSS Justify text, fill space with dots [duplicate]
  14. Div height 100% and expands to fit content [duplicate]
  15. How to make an inline-block element fill the remainder of the line?
  16. Why use an attribute selector to match classes?
  17. CSS transition auto height not working [duplicate]
  18. Vertically centering content of :before/:after pseudo-elements
  19. First letter Capitalize and other letters in lower case in css?
  20. How to remove margin from every element that is the last element in a row?
  21. How to efficiently load google fonts in Nuxt
  22. What does a `~` tilde in a CSS `url()` do?
  23. Django CSS not updating
  24. Text Stroke (-webkit-text-stroke) css Problem
  25. Full background image with fade effect
  26. How do I make text bold in HTML?
  27. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  28. Two css files defining same class
  29. How to use variable in CSS? [duplicate]
  30. Latest on CSS parent selector [duplicate]

Leave a Comment