CSS Tricks

You can add css code to your theme’s style.css to style the affiliate links in a certain way. These are just some examples of what is possible, and it depends on your theme’s css to get them working.

You can show the text link affiliates in two columns instead with this:

.entry-content .affiliationally li, .entry-content .affiliationally-li { display:inline-block; width:45%; }

or 3 rows (always stay a bit under 100/2 or 100/3 because you have borders and margins and paddings)

.entry-content .affiliationally li, .entry-content .affiliationally-li {
	display:inline-block;
	width:30%;
}

To make the links look a bit more exciting (or just different…better choose another color that fits to your theme!), you can add something before them:

.affiliationally li::before {
	content:"http://";
    	background-color: yellow;
    	color: red;
    	font-weight: bold;
}

or if it should be part of the link and not in front of the link:

.affiliationally a::before {
	content:"\21D2";
}

You can use any glyph or also the awesome font awesome icons if you have font awesome included in your theme. Just add \UNICODE of the wanted icon as the content in above code.

.affiliationally a::before { font-family: "FontAwesome"; content: "\f066"; }

and style the description

.affiliationally-description {
	font-size:60%;
}

owl

If you show image links, but some affiliates don’t have any images attached, you could style them to look like a button:

.entry-content a.affiliationally-image-link {
	display: inline-block;
	overflow: hidden;
	width: 100px;
	height: 35px;
	border: 1px solid black;
	background: #C3D0DB;
	font-size: 8px;
	text-align: center;
	line-height: 9px;
	padding:12px 0;
	margin: 10px;
	vertical-align:middle; } 

You can also style the widget links to look like buttons.

.affiliationally_widget a.affiliationally-image-link,.affiliationally_widget .affiliationally-li, .affiliationally_widget .affiliationally-link{
 display:inline-block;float:left;
 width:35px;
 height:50px;
 border: 1px solid black;
 background:#C3D0DB;
 font-size:8px;
 line-height:8px;
 text-align:center;
 margin:2px;
}
.affiliationally_widget a.affiliationally-image-link{
 padding:2px;
}

With the ::first-letter and ::first-line selector, you can style the first letter or line of the text differently.

.affiliationally_widget a.affiliationally-image-link::first-letter,.affiliationally_widget .affiliationally-li::first-letter, .affiliationally_widget .affiliationally-link::first-letter { 
    font-size: 150%;
    color: #8A2BE2;
}

.affiliationally_widget a:link.affiliationally-image-link::first-line,.affiliationally_widget .affiliationally-li::first-line,.affiliationally_widget a.link::first-line, .affiliationally_widget a.affiliationally-link::first-line {
 font-size: 150%;
 font-family:Arial;
 }