DailyKadenceWP 12: How to add an arrow to the Infobox Learn Button

By default, the Kadence Block Info box doesn’t provide any option to add an icon, like for the simple buttons. While working on accessibility remediation for my website, I realized the Learn More Link needs to be notified like the other buttons, with an arrow (chevron icon).

The easiest solution I used was to add the arrow as a pseudo-element using custom CSS:

1. The SVG icon file is URL-encoded using the URL-encoder for SVG tool;
2. The ready-code-for CSS is pasted in the content URL like below;
3. The hover color could be changed as highlighted below.

.kt-blocks-info-box-learnmore-wrap {
   position: relative;
}
.kt-blocks-info-box-learnmore-wrap::after { 
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' fill='none'%3E%3Cpath fill='%23CB4A2A' d='M6.605 5.395a.858.858 0 0 1 0 1.213l-5.141 5.141a.858.858 0 0 1-1.213-1.213L4.787 6 .254 1.464A.858.858 0 0 1 1.467.251l5.14 5.141-.002.003Z'/%3E%3C/svg%3E");  
   position: absolute;
   right:-6px; 
   top: 50%;
   transform: translateY(-50%);
}
.kt-blocks-info-box-learnmore-wrap:hover::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' fill='none'%3E%3Cpath fill='%23141e35' d='M6.605 5.395a.858.858 0 0 1 0 1.213l-5.141 5.141a.858.858 0 0 1-1.213-1.213L4.787 6 .254 1.464A.858.858 0 0 1 1.467.251l5.14 5.141-.002.003Z'/%3E%3C/svg%3E"); 
}