Border length smaller than div width?

by

You can use pseudoelements. E.g.

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background: #eee;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}
<div>Item 1</div>
<div>Item 2</div>

No need to use extra markup for presentational purpose. :after is also supported from IE8.

edit:

if you need a right-aligned border, just change left: 0 with right: 0

if you need a center-aligned border just simply set left: 50px;

More Related Contents:

  1. Specific order of inline-block elements on mobile and desktop devices
  2. Browser is not displaying images
  3. How can I select an element with multiple classes in jQuery?
  4. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  5. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  6. Put icon inside input element in a form
  7. Grid properties not working on elements inside grid container
  8. Is element block level or inline level?
  9. Can I change the checkbox size using CSS?
  10. Maintain the aspect ratio of a div with CSS
  11. How do I give text or an image a transparent background using CSS?
  12. How to blur(css) div without blur child element [duplicate]
  13. Properly sizing and aligning the flex item(s) on the last row
  14. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  15. How to center an element in the middle of the browser window?
  16. Styling an anchor tag to look like a submit button
  17. Hide html horizontal but not vertical scrollbar
  18. Why is there vertical scroll on the main container?
  19. Scrolling to an Anchor using Transition/CSS3
  20. Can a ::before selector be used with a ?
  21. CSS data attribute new line character & pseudo-element content value
  22. CSS grid wrapping
  23. How can I create a row-based masonry layout using CSS?
  24. Selecting the last element among various nested containers
  25. Why using absolute position causes the div to be on top?
  26. Element with “display: inline-flex” has a strange top margin
  27. How to flatten nested divs to display them in a CSS grid?
  28. Floating Div Over An Image
  29. How to remove the space between list items [duplicate]
  30. How to create a heart shape using CSS?

Leave a Comment