PMPro Advanced Levels compare table highlight example CSS

pmpro_advanced_levels-compare_table.css

#pmpro_levels.pmpro_advanced_levels-compare_table thead tr:first-child th.pmpro_level-highlight::before {
    content: "★ RECOMMENDED ★";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #007cba;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

#pmpro_levels.pmpro_advanced_levels-compare_table thead tr:first-child th.pmpro_level-highlight {
	border-top: 3px solid #007cba !important;
}

.pmpro_advanced_levels-compare_table thead th.pmpro_level-highlight {
	border-left: 3px solid #007cba !important;
	border-right: 3px solid #007cba !important;
}

.pmpro_advanced_levels-compare_table thead tr:last-child th.pmpro_level-highlight {
	border-bottom: none;
}

.pmpro_advanced_levels-compare_table tbody td.pmpro_level-highlight {
	border-left: 3px solid #007cba !important;
	border-right: 3px solid #007cba !important;
}

.pmpro_advanced_levels-compare_table tbody tr td.pmpro_level-highlight {
	border-bottom: none;
}

.pmpro_advanced_levels-compare_table tfoot td.pmpro_level-highlight {
	border-left: 3px solid #007cba !important;
	border-right: 3px solid #007cba !important;
}

#pmpro_levels.pmpro_advanced_levels-compare_table tfoot tr:last-child td.pmpro_level-highlight {
	border-bottom: 3px solid #007cba !important;
}