Comprimento da borda menor que largura div?
A largura div é 200px, então border-bottom também é 200px, mas o que devo fazer se quiser que o border-bottom apenas 100px sem alterar a largura div?
— Ali Nouman
Você pode usar pseudoelementos. Por exemplo
Não há necessidade de usar marcação extra para fins de apresentação. : after também é compatível com o IE8.
se você precisa de uma borda alinhada à direita, basta alterar left: 0comright: 0
se você precisa de uma borda alinhada ao centro, basta definir left: 50px;
Essa foi a minha técnica também, mas observe que ela criará a borda na metade esquerda do div. Se você quiser centralizado, dê o div:before left: 50px.
A pergunta não especifica em que posição a borda deve aparecer, então não considerei outras posições
se a largura da borda inferior for 50% e você quiser centralizá-la, o estilo precisa ser, left: 25%pois será 25% + 50% + 25%
Sim, estou ciente que neste exemplo funciona. Mas para outras pessoas que estão fazendo algo semelhante e que podem tentar torná-lo responsivo, talvez seja necessário usar%, pois era o caso para o qual eu precisava da resposta.
Use margin: auto, right: 0, left: 0no :beforepara o centro da linha. Vote positivamente se isso ajudou você.
— Ale_info
Outra maneira de fazer isso (em navegadores modernos) é com uma caixa-sombra negativa. Confira este violino atualizado: http://jsfiddle.net/WuZat/290/
Porém, acho que a maneira mais segura e compatível é a resposta aceita acima. Só pensei em compartilhar outra técnica.
Você pode usar um gradiente linear:
Eu adicionei uma linha sob a tag h3 assim
— Ajit Bhandari
Você não pode ter uma borda de tamanho diferente da própria div.
a solução seria apenas adicionar outro div embaixo, centralizado ou posicionado de forma absoluta, com a borda de 1 pixel desejada e apenas 1 pixel de altura.
Deixei a borda original para que você possa ver a largura e tenha dois exemplos - um com largura 100 e outro com largura 100 centralizado. Exclua aquele que você não deseja usar.
— Authman Apatira
Atrasado para a festa, mas para quem quiser fazer 2 bordas (embaixo e à direita no meu caso), você pode usar a técnica na resposta aceita e adicionar um: after psuedo-element para a segunda linha e então apenas alterar as propriedades como então: http://jsfiddle.net/oeaL9fsm/
— JHeth
Eu tenho o caso de ter alguma borda inferior entre as imagens no contêiner div e o melhor código de uma linha era - estilo border-bottom: inset;
— Ganni Georgiev
Eu fiz algo assim no meu projeto. Eu gostaria de compartilhar isso aqui. Você pode adicionar outro div como filho e dar a ele uma borda com uma largura pequena e colocá-lo à esquerda, centro ou direita com CSS normal
<div class ="ac-brdr"></div>
CSS como abaixo:
color: magneta;
.active .ac-brdr {
border-bottom: 1px solid magneta;
— Faiz Hameed
A borda recebe todo o elemento html. Se você quiser metade da borda inferior, pode envolvê-la com algum outro bloco identificável como o span.
Isso cria uma linha horizontal com largura de 50%, você precisará criar / modificar a classe se quiser editar o estilo.
— DanielSD
isso não é útil. o requisito é limite de div
— ahmednawazbutt
Acabei de fazer o oposto usando :aftere ::afterporque precisava deixar minha borda inferior exatamente 1.3remmais larga:
Meu elemento ficou super deformado quando usei :beforee :afterao mesmo tempo porque os elementos estão alinhados horizontalmente com display: flex, flex-direction: rowe align-items: center.
Você pode usar isso para fazer algo mais amplo ou mais estreito, ou provavelmente qualquer mods de dimensão matemática:
Desculpe, isto é SCSS, basta multiplicar os números por 10 e alterar as variáveis ​​com alguns valores normais.