Border length smaller than div width?

问题:

I have following code

div {
   width:200px;
   border-bottom:1px solid magenta;
   height:50px;   
}

DEMO

The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?

回答1:

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;

回答2:

Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta;

I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.

回答3:

You can use a linear gradient:

div {
    width:100px;
    height:50px;
    display:block;
    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
	background-position: bottom;
	background-size: 100% 25px;
	background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    border-top: 1px solid red;
}

<div></div>

回答4:

I added line under under h3 tag like this

<h3 class="home_title">Your title here</h3> 
.home_title{
    display:block;
}
.home_title:after {
    display:block;
    clear:both;
    content : "";
    position: relative;
    left    : 0;
    bottom  : 0;
    max-width:250px;
    height  : 1px;
    width   : 50%;  /* or 100px */
    border-bottom:1px solid #e2000f;
    margin:0 auto;
    padding:4px 0px;
}

回答5:

You cannot have a different sized border than the div itself.

the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.

http://jsfiddle.net/WuZat/3/

I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.

回答6:

Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so: http://jsfiddle.net/oeaL9fsm/

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid magenta;
}

回答7:

The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.

HTML code:

<div> <span>content here </span></div>

CSS as below:

 div{
    width:200px;
    height:50px;   
    }
 span{
        width:100px;
        border-bottom:1px solid magenta;   
    } 

回答8:

            div{
                font-size: 25px;
                line-height: 27px;
                display:inline-block;
                width:200px;
                text-align:center;
            }

            div::after {
                background: #f1991b none repeat scroll 0 0;
                content: "";
                display: block;
                height: 3px;
                margin-top: 15px;
                width: 100px;
                margin:auto;
            }

回答9:

This will help:

http://www.w3schools.com/tags/att_hr_width.asp

<hr width="50%">

This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.

回答10:

I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:

My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.

You could use this for making something wider or narrower, or probably any mathematical dimension mods:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.

回答11:

I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;