Prepositive Rating Bar

Browneyedsoul · August 26, 2021, 9:25am

CSS

[data-rem-tags~="1star"] .rem-text {
	margin-left: 65px;
}

[data-rem-tags~="1star"] .rem-bullet::before {
	content: "★";	
	color: #F1FA8C;
	background-color: #2B3137;	
	border-radius: 5px;
	padding: 2px;
	padding-right: 58px;
	position: relative;
	top: -7px;
	left: -4px;
}

[data-rem-tags~="2star"] .rem-text {
	margin-left: 65px;
}

[data-rem-tags~="2star"] .rem-bullet::before {
	content: "★★";	
	color: #F1FA8C;
	background-color: #2B3137;	
	border-radius: 5px;
	padding: 2px;
	padding-right: 44px;
	position: relative;
	top: -7px;
	left: -4px;
}

[data-rem-tags~="3star"] .rem-text {
	margin-left: 65px;
}

[data-rem-tags~="3star"] .rem-bullet::before {
	content: "★★★";	
	color: #F1FA8C;
	background-color: #2B3137;	
	border-radius: 5px;
	padding: 2px;
	padding-right: 30px;
	position: relative;
	top: -7px;
	left: -4px;
}

[data-rem-tags~="4star"] .rem-text {
	margin-left: 65px;
}

[data-rem-tags~="4star"] .rem-bullet::before {
	content: "★★★★";	
	color: #F1FA8C;
	background-color: #2B3137;	
	border-radius: 5px;
	padding: 2px;
	padding-right: 16px;
	position: relative;
	top: -7px;
	left: -4px;
}

[data-rem-tags~="5star"] .rem-text {
	margin-left: 65px;
}

[data-rem-tags~="5star"] .rem-bullet::before {
	content: "★★★★★";	
	color: #F1FA8C;
	background-color: #2B3137;	
	border-radius: 5px;
	padding: 2px;
	position: relative;
	top: -7px;
	left: -4px;
}

TaQuangKhoi · August 23, 2021, 12:58pm

Good Job… You are Star…

Browneyedsoul · August 23, 2021, 1:02pm

Honor to hear that!

TaQuangKhoi · August 23, 2021, 1:17pm

Hey,

The Rating Bar disappears when The rem has content…
It does not behave like your screenshot…
Thanks.

Browneyedsoul · August 23, 2021, 1:44pm

I fixed it. please try again
Next time, I will scrutinize my code sorry for the inconveniece.