Длина границы меньше, чем ширина элемента div?

У меня есть следующий код 

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

демо

ширина div составляет 200px, поэтому border-bottom также 200px, но что мне делать, если я хочу, чтобы border-bottom только 100px без изменения ширины div?

11 80
html css

11 ответов:

вы можете использовать псевдоэлементы. Е. Г.

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>

нет необходимости использовать дополнительную разметку для презентационных целей. : после также поддерживается из IE8.

edit:

если вам нужна выровненная по правому краю граница, просто измените left: 0 С right: 0

если вам нужна выровненная по центру граница, просто установите left: 50px;

165

еще один способ сделать это (в современных браузерах)-с отрицательным распределением box-shadow. Проверьте эту обновленную скрипку:http://jsfiddle.net/WuZat/290/

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

Я думаю, что самый безопасный и наиболее совместимый способ-это принятый ответ выше. Просто подумал, что поделюсь другой техникой.

26

Вы можете использовать линейный градиент:

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>
7

Я добавил строку под тегом H3, как это 

<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;
}
4

вы не можете иметь границу другого размера, чем сам div.

решение состояло бы в том, чтобы просто добавить еще один div под neath, центрированный или абсолютный, с желаемой границей 1pixel и только 1pixel по высоте.

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

Я оставил исходную границу, чтобы вы могли видеть ширину и иметь два примера-один с шириной 100, а другой с шириной 100 по центру. Удалить тот, который вы не хотите использовать.

3

поздно к партии, но для тех, кто хочет сделать 2 границы (внизу и справа в моем случае) вы можете использовать технику в принятом ответе и добавить :после psuedo-элемент для второй строки, а затем просто изменить свойства, как так: 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;
}
2

на границе задается весь html элемент. Если вы хотите половину нижней границы, вы можете обернуть ее с помощью другого идентифицируемого блока, такого как span.

HTML-код:

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

CSS, как показано ниже:

 div{
    width:200px;
    height:50px;   
    }
 span{
        width:100px;
        border-bottom:1px solid magenta;   
    }
1
            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;
            }
1

Это поможет:

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

<hr width="50%">

это создает горизонтальную линию шириной 50%, вам нужно будет создать/изменить класс, если вы хотите изменить стиль.

1

Я только что сделал противоположное этому с помощью :after и ::after потому что мне нужно чтобы сделать мою нижнюю границу точно 1.3rem шире:

мой элемент получил супер деформируется, когда я использовал :before и :after в то же время, потому что элементы были выровнены по горизонтали с display: flex,flex-direction: row и align-items: center.

вы можете использовать это для создания чего-то более широкого или узкого, или, возможно, любого математического измерения модов:

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;
}

извините, это SCSS, просто умножьте числа на 10 и измените переменные с некоторыми нормальными значениями.

1

У меня есть случай, чтобы иметь некоторую нижнюю границу между изображениями в контейнер div и лучшие одну строку код - border-bottom-style: inset;

1