Can you create a css "function" or wrapper - html

Question

So got a bit of a problem, and trying to figure out the best way.
So got some css code (heavily borrowed from coders better than me) that creates a pretty set of arrows in a menu, heavily using :after and :hover and all sorts. Had to write it in another application and now want to move it to the actual page.
Problem is, I need to set the class, and I am doing something really wrong. Basically, I decided to use the class "arrowrt" to set this to the top menu. But what is the easiest way to wrap it, or is it even easy to wrap it. Wanted to do something like .arrowrt { Loads of CSS settings }.
The code currently looks as follows
<style type="text/css" media="all">
a {
text-decoration:none;
}
ul {
margin: 20px 60px;
}
li {
margin-right: 5px;
}
ul li {
display: inline-block;
font-size: 12px;
height: 30px;
line-height: 30px;
width: 150px;
margin: 5px 8px 0 0;
text-align: center;
position: relative;
}
ul li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
ul li:first-child:before , .dbfsrt {
border-color: transparent;
}
ul li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -15px;
border-style: solid;
color: #000000;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #ccc;
z-index: 10;
}
ul li.arractive a {
background: orange;
z-index: 100;
}
ul li.active a:after {
border-left-color: orange;
}
ul li a {
display: block;
background: #ccc;
color: #000000;
}
ul li a:hover {
background: #000000;
color: #ececec;
}
ul li a:hover:after {
border-color: transparent transparent transparent #000000;
}
</style>
And the HTML section
<ul id="arrowrt">
<li class="arrowrt">Home</li>
<li class="arrowrt">Back Office</li>
<li class="arrowrt">Cash Management</li>
<li class="arrowrt arractive">Overdraft Management</li>
</ul>

Answer 1

You could (if using sass) do something like this:
.arrowrt li {
display: inline-block;
font-size: 12px;
height: 30px;
line-height: 30px;
width: 150px;
margin: 5px 8px 0 0;
text-align: center;
position: relative;
&:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
&:first-child:before {
border-color: transparent;
}
}
.dbfsrt {
border-color: transparent;
}
.arrowrt li {
a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -15px;
border-style: solid;
color: #000000;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #ccc;
z-index: 10;
}
&.arractive a {
background: orange;
z-index: 100;
}
&.active a:after {
border-left-color: orange;
}
a {
display: block;
background: #ccc;
color: #000000;
&:hover {
background: #000000;
color: #ececec;
&:after {
border-color: transparent transparent transparent #000000;
}
}
}
}
but you should have arrowrt as a class not id so that it can be reused.
The css equiv of this would be:
.arrowrt li {
display: inline-block;
font-size: 12px;
height: 30px;
line-height: 30px;
width: 150px;
margin: 5px 8px 0 0;
text-align: center;
position: relative;
}
.arrowrt li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
.arrowrt li:first-child:before {
border-color: transparent;
}
.dbfsrt {
border-color: transparent;
}
.arrowrt li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -15px;
border-style: solid;
color: #000000;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #ccc;
z-index: 10;
}
.arrowrt li.arractive a {
background: orange;
z-index: 100;
}
.arrowrt li.active a:after {
border-left-color: orange;
}
.arrowrt li a {
display: block;
background: #ccc;
color: #000000;
}
.arrowrt li a:hover {
background: #000000;
color: #ececec;
}
.arrowrt li a:hover:after {
border-color: transparent transparent transparent #000000;
}