How can i get this arrow inside my border? - css

Question

I have a currency converter,
This is how it looks like:
https://gyazo.com/661e6713051bb5ddb288a92f66b24c92
So, I have that arrow inserted after a class with :after , however, on some themes(We are doing a project for shopify) i have to give the arrow a right in order for it to look good. Any ideeas how can i get the arrow inside the border?
the css looks like
.vitals-nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #fff;
color: #333;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 42px;
line-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 23px;
position: relative;
text-align: left !important;
webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
border-radius: 5px;
border: solid 1px #e8e8e8;
}
.vitals-nice-select:hover {
border-color: #dbdbdb;
}
and for the arrow
.vitals-nice-select:after {
border-bottom: 2px solid #999;
border-right: 2px solid #999;
content: \'\';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}

Answer 1

Is this what u want?
.vitals-nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #fff;
color: #333;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 42px;
line-height: 42px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
border-radius: 5px;
border: solid 1px #e8e8e8;
}
.vitals-nice-select:hover {
border-color: #dbdbdb;
}
.vitals-nice-select:after {
border-bottom: 2px solid #999;
border-right: 2px solid #999;
content: '';
display: block;
height: 5px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
transform: rotate(45deg) translateX(-50%);
transition: all 0.15s ease-in-out;
width: 5px;
}
<div class="vitals-nice-select">TextTextText</div>

Answer 2

See the fiddle here: https://jsfiddle.net/9o1L1Lg4/
Add the following properties:
.vitals-nice-select {
position: relative;
}
.vitals-nice-select:after {
position: absolute;
right: 0;
/* If you want to center it vertically add the following properties */
top: 50%;
transform: translatey(-50%);
}