Seletor para traço ao lado de texto

Oi Marylia, tudo bom?

Bacana esse desafio!

Seguinte: você precisa posicionar esses tracinhos que você fez com o after usando o pos: ABSOLUTE, um right 0 e top 0.

Mas ai eles vao pegar quem como referencia? O body!

Como falar pra eles que a referencia precisa ser o .box-itens .item1 ? Mudando o posicionamento desse cara tambem, algo como relative!

Aí é ir ajustando altura e esse top aí na mão.

Espero ter ajudado e bons estudos,

Abcs!

Ual deu super certo Natan! Brigadaaa!!! =D Agora estou colocando o :last-child para a última coluna não ter a borda, mas não funcionou? será que coloquei na classe errada?

.box-itens .item1{
    width:25%;
    padding:10px;
    font-size:12px;
    color:#888888;
    position:relative;
}

.box-itens .item1:after{
    content: "";
    border-right:1px solid #888;
    position:absolute;
    right:0;
    top:0;
    height: 77%;
    margin-top: 17px;
}

.box-itens .item1:last-child{
    border-right:none;
}

(Ignorar este post)

O problema está na criação do seletor, .box-itens .item1:last-child significa:

dentro de box-itens, selecione todos os item1 que forem last-child.

Se você for olhar a estrutura do HTML, quase todos os item1 são last-child.

O único que não é last-child é este:

<div class="item1"><h4>Conta PJ sem mensalidade</h4>

Na verdade ele é first-child.

-------------------------------------------------------

A única forma de selecionar a última div é usando o operador >. Olhando pelo estrutura do HTML, a última div é a única div que é filha de uma div e neta de outra div, ou seja, selecionaremos uma div que é filha de uma div e que esta é filha de outra div kkk:

.item1 > .item1 > .item1
{
    /* código aqui */
}

Leitura do operador >:

A > B --- Selecione os filhos diretos de A que são do tipo B.

".item1 > .item1" --- Selecione os filhos diretos de item1 que são do tipo item1.

-------------------------------------------------------

Porém a melhor forma seria colocar uma classe na última div e aí sim tirar a borda.

haha aí me confundo um pouco, mas eu fiz assim do jeito que falou e não funcionou.

.item1 > .item1 > .item1{
    border-right:none;
}

Nossa, desculpe-me. O visual do seu HTML me enganou muito kk, a indentação das tags ficou deslocada na parte de baixo e me levou a achar que a estrutura era completamente diferente. As divs estão parecendo ser filhas umas das outras, mas na verdade todas são filhas de uma mesma mãe ou pai kk (box-itens). Só descobri o meu erro ao ver como o inspetor do navegador interpretou a estrutura das tags.

Depois disso eu até refiz o código para que ficasse um pouco melhor de saber onde cada tag termina:

<div class="box-itens">

    <div class="item1"><h4>Conta PJ sem mensalidade</h4>
        <p>Aqui, não temos taxa de abertura e nem valor fixo mensal.</p>
        <p>Você paga apenas os serviços que usar.</p>
    </div>

    <div class="item1"><h4>White Label</h4>
        <p> </p>
        <p>Personalize suas POS (máquina de cartão, tela e comprovante), cartão físico, conta digital (app e site).</p>
    </div>

    <div class="item1"><h4>CPC (Conta Pagamento do Colaborador)</h4>
        <p>Realize o pagamento mensal dos seus colaboradores através da sua conta digital.</p>
    </div>

    <div class="item1"><h4>POS e TEF</h4>
        <p> </p>
        <p>Temos as menores taxas do mercado e as melhores tecnologias para o seu sistema financeiro eletrônico.</p>
    </div>

</div>

O que faltou no seu seletor foi apenas especificar que quem deve ficar sem borda é o :after

É só mudar essa parte do CSS

.box-itens .item1:last-child {
    border-right:none;
}

Para

.box-itens .item1:last-child:after {
    border-right:none;
}

Só que depois de fazer isso você vai perceber que você tem que tirar a borda na verdade do :after da primeira div filha, ou seja, você vai ter que mudar para .box-itens .item1:first-child:after.

Ahh agora sim Axell perfeito!!! MUito obrigada!! Vou estudar mais essa parte de seletores . =D