CSS -> DIV content on ::after content

Asked

Viewed 100 times

0

on the site I’m trying to develop,

https://fielcard.net.br/

In the middle there’s a section of frequent questions and I have the following structure:

$( 'body div#duvidas > section.duvidas > article' ).click( function () {

	$( 'body div#duvidas > section.duvidas > article' ).not( this ).find( "header" ).removeClass( "ativo" );

	$( 'body div#duvidas > section.duvidas > article' ).find( "p" ).hide();

	$( this ).find( 'header' ).removeClass( 'ativo' ).toggleClass( 'ativo' );

	if ( !$( this ).find( 'p' ).is( ':visible' ) ) { 

		$( this ).find( 'header' ).addClass( 'ativo' );
		$( this ).find( 'p' ).slideToggle( "slow" );

	} else {

		$( this ).find( 'header' ).removeClass( 'ativo' );
		$( this ).find( 'p' ).slideToggle( "slow" );

	}

  }

)
body div#duvidas > section.duvidas {
    flex-direction: column;
    width: 60%;
}
body div#duvidas > section.duvidas > article {
    border-width: 1px 1px 0 1px;
    border-color: #1b3665;
    border-style: solid;
}
body div#duvidas > section.duvidas > article > header:hover,
body div#duvidas > section.duvidas > article > header:active{
	color: #fff;
    background-color: #1b3665;
}
body div#duvidas > section.duvidas > article:last-of-type {
    border-bottom: 1px solid #1b3665;
}
body div#duvidas > section.duvidas > article > p {
    display: none;
    padding: 10px;
}
body div#duvidas > section.duvidas > article > header {
	position: relative;
	color: #1b3665;
	font-size: 1.5em;
	font-weight: bolder;
	cursor: pointer;
	padding: 10px 35px 10px 10px;
}
body div#duvidas > section.duvidas > article > header::after {
	position: absolute;
	display: inline-block;
	right: 5px;
	top: 0;
	content: '+';
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	bottom: 0;
	margin: auto 0;
}
body div#duvidas > section.duvidas > article > header::after {
    content: '+';
}
body div#duvidas > section.duvidas > article > header.ativo {
    color: green;
}
body div#duvidas > section.duvidas > article > header.ativo::after {
    content: '-';
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <body>
      <div id=duvidas>
        <section class=duvidas>
          <article>
            <header>Este Título é grande de mais para caber nesse header você não acha?</header>
            <p>Texto</p>
          </article>
        </section>
      </div>
    </body>

In the header, I have a ::after

But I’m with a problem I can’t seem to solve:

The text of titles, when in mobile version, end rising about the contents of ::after

css css3

2 answers

5

Just give a padding-right: 70px; in class body div#duvidas > section.duvidas > article > header { }

It’ll stay that way:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

  • Again lack of attention my right?

  • 1

    @Carlosrocha as I have told you a few times... you are sinning with basic things... You have to know the difference between padding and margin, know when to use one or the other etc. You find on youtube a plethora of Portuguese lessons about this, take advantage and see also some lessons about position and display. you will not spend 2 hours on this and will learn for the rest of your life. It is the tip

  • My case is more serious: Knowing I know. But it’s missing is attention even! As I work alone, do everything, back, data and front. Sometimes I end up getting a little caught up (?) and getting lost!

  • @Carlosrocha vdd sometimes gives a white of basic things and we end up taking the hard way when in reality it is easier than we imagine

1


Follow the corrected code below, hope it helps :)

body div#duvidas > section.duvidas {
        flex-direction: column;
        width: 60%;
    }
    body div#duvidas > section.duvidas > article {
        border-width: 1px 1px 0 1px;
        border-color: #1b3665;
        border-style: solid;
    }
    body div#duvidas > section.duvidas > article > header:hover,
    body div#duvidas > section.duvidas > article > header:active{
    	color: #fff;
        background-color: #1b3665;
    }
    body div#duvidas > section.duvidas > article:last-of-type {
        border-bottom: 1px solid #1b3665;
    }
    body div#duvidas > section.duvidas > article > p {
        display: none;
        padding: 10px;
    }
    body div#duvidas > section.duvidas > article > header {
    	position: relative;
    	color: #1b3665;
    	font-size: 1.5em;
    	font-weight: bolder;
    	cursor: pointer;
    	padding: 10px 35px 10px 10px;
    }
    body div#duvidas > section.duvidas > article > header::after {
    	position: absolute;
    	display: inline-block;
    	right: 5px;
    	top: 0;
    	content: '+';
    	width: 30px;
    	height: 30px;
    	line-height: 30px;
    	text-align: center;
    	bottom: 0;
    	margin: auto 0;
    }
    body div#duvidas > section.duvidas > article > header::after {
        content: '+';
    }
    body div#duvidas > section.duvidas > article > header.ativo {
        background: #1b3665;
        color: #fff;
    }
    body div#duvidas > section.duvidas > article > header.ativo::after {
        content: '-';
    }
<div id=duvidas>
    	<section class=duvidas>
    		<article>
    			<header>Este Título é grande de mais para caber nesse header você não acha?</header>
    			<p>Texto</p>
    		</article>
    		<article>
    			<header>Este Título é grande de mais para caber nesse header você não acha?</header>
    			<p>Texto</p>
    		</article>
    		<article>
    			<header>Este Título é grande de mais para caber nesse header você não acha?</header>
    			<p>Texto</p>
    		</article>
    	</section>
    </div>

The modifications were made to:

body div#doubts > Section.doubts > article > header

And

body div#doubts > Section.doubts > article > header::after

A good fit for jQuery of your tabs is the following: (You are commented)

$( 'body div#duvidas > section.duvidas > article' ).on('click', function () {
  // Verifica se a tab atual está aberta, se sim, fecha, se não, fecha todas abertas e abre
  if ( $(this).find( 'header' ).hasClass('ativo') ) {
    // Pra garantir, fecha todas as abas abertas
    $( this ).find( 'header' ).removeClass( 'ativo' );
    $( this ).find( 'p' ).slideUp();
  } else {
    // Fecha todas as tabs anteriores e remove as classes ativo deles
    $( 'section.duvidas > article' ).find( 'header' ).removeClass( 'ativo' );
    $( 'section.duvidas > article' ).find( 'p' ).slideUp();
    // Adiciona a classe ativo no header atual e abre a tag p
    $( this ).find( 'header' ).addClass( 'ativo' );
    $( this ).find( 'p' ).slideDown();
  }
});

  • Let me ask you something. On it, on the mobile screens, when making the mousover and after clicked, the title clicked continues with the color Blue background. But in the dektops after the removal of the mouse the white color back. How to adapt this to the desktops tb?

  • @Carlosrocha Modification made, make good use :)

  • I had already tested this. But this just leaves the other 'p' open and does not change add the effect when closing. If possible, replay the reply with this information you are passing please? I am deleting comments prior to this.

  • @Carlosrocha I added the corrected script from the tabs at the end of the question, basically, you will remove that your jquery and will put that one on top, I tested and worked everything right here

  • Now its right! Look sorry for my inconvenience, but thank you very much!

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.