Get second line of bullet item to indent as first part – not underneath the bullet?

by

My take on this would be to include the bullet in another div and then wrap both divs in a container div.

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}
<div class="container-div">
    <div class="red-square-5"></div>
    <div class="row2">
        Long long long long long long long long long long long 
        long long long long long long long long long long long 
        long long long title
    </div>
</div>

And this would be the solution using unordered list, as seen here: How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -0.8em;
}

li::before {
  content: "■ ";
  color: red; /* or whatever color you prefer */
}
<ul>
  <li>Long long long long long long long long long long long long long long long long long long lng long long long long long long title
  </li>
</ul>

More Related Contents:

  1. Vertically center element on HTML page with some content on top (Bootstrap)
  2. comma after td entry html [closed]
  3. Using relative URL in CSS file, what location is it relative to?
  4. How to create a circle with links on border side
  5. Is there a CSS selector for the first direct child only?
  6. Limit scope of external css to only a specific element?
  7. Why the content is not covered by the background of an overlapping element?
  8. How to animate underline from left to right?
  9. Drop-down menu that opens up/upward with pure css
  10. How to wrap text around an image using HTML/CSS
  11. How to remove the underline for anchors(links)?
  12. Using “margin: 0 auto;” in Internet Explorer 8
  13. Input with display:block is not a block, why not?
  14. Removing margin from flex items when they wrap
  15. CSS background-size: cover replacement for Mobile Safari
  16. Html Select box options on Hover?
  17. :not(:empty) CSS selector is not working?
  18. How to make div element auto-resize maintaining aspect ratio?
  19. How to vertically center a Bootstrap carousel-caption?
  20. Force browsers to load CSS before showing the page
  21. Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
  22. How do I prevent the padding property from changing width or height in CSS?
  23. CSS align images and text on same line
  24. How do I style the HTML form validation error messages with CSS?
  25. Is there a `pointer-events:hoverOnly` or similar in CSS?
  26. Adding style to file upload button in css
  27. How do I make a text input non-editable?
  28. CSS Border on PNG image with transparent parts
  29. Create wavy borders in CSS for top and bottom borders
  30. Prevent ligatures in Safari (Mavericks/iOS7) via CSS

Leave a Comment