Home > Web Front-end > CSS Tutorial > Can CSS Create Partial Borders Without Extra Elements?

Can CSS Create Partial Borders Without Extra Elements?

Susan Sarandon
Release: 2024-12-03 08:44:10
Original
770 people have browsed it

Can CSS Create Partial Borders Without Extra Elements?

Overcoming Border Length Limitations

Question:

Is there a method to restrict the extent of a border? Notably, a

has a bottom border, but you desire a left-aligned border that extends only partially up. Is it feasible to accomplish this without introducing additional elements to the page?

Answer:

CSS generated content offers a solution:

div {
  position: relative;
}

/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}
Copy after login
<div>Lorem Ipsum</div>
Copy after login

The above is the detailed content of Can CSS Create Partial Borders Without Extra Elements?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template