Arrow in select with div and jquery

Question

$( document ) . ready( function () {

	$( 'div#bloqueioSelect' ) . click( function () {

		if ( $( 'div#bloqueioSelect ul' ) . is( ':visible' ) )
			$( 'div#bloqueioSelect ul' ) . css( 'display', 'none' );
		else
			$( 'div#bloqueioSelect ul' ) . css( 'display', 'block' );

	} );

	$( 'div#bloqueioSelect ul li' ) . click( function () {
		$('input[type=hidden]#bloqueio'). val( $(this) . val() );
		alert($('input[type=hidden]#bloqueio'). val());
	} );

  	} );

div.selecao {
	width: 100px;	
	border: 1px #CCCCCC solid;	
} 
div.selecao div {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
div.selecao div:after {
	width: 40px;
	height: 30px;
	background: url("seta.jpg") no-repeat right #ddd;
}
div.selecao div,
div.selecao ul {
	display: block;
	width: 100%;
	background-color: #F8F8F8;
	border-top: 1px #CCCCCC solid;
}
div.selecao ul {
	display: none;
	padding: 0;
	margin: 0;
}
div.selecao  ul li img {
	float: left;
}		
div.selecao  ul li {
	display: block;
	width: 100%;
	height: 30px;
	cursor: pointer;
	border-top: 1px #CCCCCC solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=hidden value=' . $busca->getBloqueio() . '  name=bloqueia id=bloqueia />

<div class=selecao id=bloqueiaSelect>
	<div>Bloqueia</div>
	<ul>
		   <li value=1><img src="imgs/bloquear.png" style="height:30px" title="Bloquear Produto" /></li><!--
		--><li value=0><img src="imgs/desbloquear.png" style="height:30px" title="Desbloquear Produto"/></li>
	</ul>
</div>
<br />
<input type=hidden value=' . $busca->getBloqueio() . '  name=bloqueio id=bloqueio />

<div class=selecao id=bloqueioSelect>
	<div>Bloqueio</div>
	<ul>
		   <li value=1><img src="imgs/bloquear.png" style="height:30px" title="Bloquear Produto" /></li><!--
		--><li value=0><img src="imgs/desbloquear.png" style="height:30px" title="Desbloquear Produto"/></li>
	</ul>
</div>

The goal here is add one seta.jpg in div as after but is appearing to arrow.

Where am I going wrong?

After some changes guided by colleague Lucas... I arrived in:

div.selecao div::after {
    display: inline-block;
    content: url("seta.jpg");
    width: 30px;
    height: 30px;
}

But the way out wasn’t cool.

Blocks needs to center vertically and horizontally and the arrow needs to go all the way to the right.

Answer 1

Hello, good night

So that the :after, as well as the :before work, you must define your content. As in your case the content will be an image and not any element, as a text, you do not need to fill it, however you should define it as empty. It seems that this is missing from your code. Change the css snippet to:

div.selecao div::after {
    content: "";
    display: block;
    width: 40px;
    height: 30px;
    background: url("seta.jpg") no-repeat right #ddd;
    background-size: 100% 100%;
}

To rotate the element, use the CSS function rotate(). Behold:

#elemento{
    transform: rotate(360deg); // rotaciona 360 graus
}

I hope I helped, hug!

Answer 2

About why the arrow did not appear Lucas friend already spoke the reason, you did not put the content in the ::after.

On the alignment of the arrow vc can put position:relative on the button and position:absolite in the ::after with right:0 so it gets pasted in the right corner. And to align the text by discounting the width of the image that is 40px just use a margin negative with that value.

OBS: Of course if your button is too small the image is above the text.

$(document).ready(function () {

  $('div#bloqueioSelect').click(function () {

    if ($('div#bloqueioSelect ul').is(':visible'))
      $('div#bloqueioSelect ul').css('display', 'none');
    else
      $('div#bloqueioSelect ul').css('display', 'block');

  });

  $('div#bloqueioSelect ul li').click(function () {
    $('input[type=hidden]#bloqueio').val($(this).val());
    alert($('input[type=hidden]#bloqueio').val());
  });

});

div.selecao {
	width: 100px;
	border: 1px #CCCCCC solid;
}

div.selecao div {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: relative;
}

div.selecao div::after {
	content: "";
	width: 40px;
	height: 30px;
	background: url("https://placecage.com/40/30") no-repeat right #ddd;
	display: block;
	right: 0;
	top: 0;
	position: absolute;
}

div.selecao div,
div.selecao ul {
	display: block;
	width: 100%;
	background-color: #F8F8F8;
	border-top: 1px #CCCCCC solid;
}

div.selecao ul {
	display: none;
	padding: 0;
	margin: 0;
}

div.selecao ul li img {
	float: left;
}

div.selecao ul li {
	display: block;
	width: 100%;
	height: 30px;
	cursor: pointer;
	border-top: 1px #CCCCCC solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=hidden value=' . $busca->getBloqueio() . ' name=bloqueia id=bloqueia />

<div class=selecao id=bloqueiaSelect>
	<div>Bloqueia</div>
	<ul>
		<li value=1><img src="imgs/bloquear.png" style="height:30px" title="Bloquear Produto" /></li>
		<!--
			-->
		<li value=0><img src="imgs/desbloquear.png" style="height:30px" title="Desbloquear Produto" /></li>
	</ul>
</div>
<br />
<input type=hidden value=' . $busca->getBloqueio() . ' name=bloqueio id=bloqueio />

<div class=selecao id=bloqueioSelect style="width: 200px;">
	<div>
		<span style="margin-left: -40px;">Bloqueio</span>
	</div>
	<ul>
		<li value=1><img src="imgs/bloquear.png" style="height:30px" title="Bloquear Produto" /></li>
		<!--
			-->
		<li value=0><img src="imgs/desbloquear.png" style="height:30px" title="Desbloquear Produto" /></li>
	</ul>
</div>