Add class to jQuery Highlight Effect in tag-it.js

Question

I want to add a class in tag-it.js so the Highlight Effect affects my whole element.

Tag-it is a jQuery UI plugin which uses the Highlight Effect when you try to enter the same tag twice. It works fine, but to get a square on front of the tags I changed the style of my tags with something like this:

ul.tagit li.tagit-choice:before {
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  border-color:transparent #6e92c7 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;  
}

Now the Highlight Effect affects online the body of my tags. So I tried to find the position in the tag-it.js where the highlight effect is initialized and I found these lines:

if (!this.options.allowDuplicates && !this._isNew(value)) {
    var existingTag = this._findTagByLabel(value);
    if (this._trigger('onTagExists', null, {
        existingTag: existingTag,
        duringInitialization: duringInitialization
    }) !== false) {
        if (this._effectExists('highlight')) {
            existingTag.effect('highlight', {color:"#ff6666"});
        }
    }
    return false;
}

I've tried to change it but unfortunately nothing I've tried worked :( Here one of my attempts:

if (!this.options.allowDuplicates && !this._isNew(value)) {
    var existingTag = this._findTagByLabel(value);
    // my added line
    var existingTagbefore =  this._findTagByLabel('ul.tagit li.tagit-choice:before');
    if (this._trigger('onTagExists', null, {
        existingTag: existingTag,
        duringInitialization: duringInitialization
    }) !== false) {
        if (this._effectExists('highlight')) {
            existingTag.effect('highlight', {color:"#ff6666"});
            // my added line
            existingTagbefore.effect('highligh', {color:"#ff6666"});
        }
    }
    return false;
}

Here is a working example: (Try to write e.g. 2 x PHP | Enter = delimiter)

$(function() {
    var availableTags = [
        "SEO", "PHP", "MySQL",
    ];
    //-------------------------------
    // Allow spaces without quotes.
    //-------------------------------
    $('#allowSpacesTags').tagit({
        allowSpaces: true,
        fieldName: 'tags[]',
        autocomplete: {
            source: availableTags,
        }
    });
});

ul.tagit {
 padding: 1px 5px 1px 5px;
 line-height: 1em;
 overflow: auto;
 margin-left: inherit; /* usually we don't want the regular ul margins. */
 margin-right: inherit;
 background: inherit;
 border:solid #C6C6C6 1px;
 background-color: #FFF;
}
ul.tagit li {
 display: block;
 float: left;
 margin: 4px 10px 4px 13px;
}
ul.tagit li.tagit-choice {    
 position: relative;
 line-height: inherit;
 height: 20px;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px; 
  border-bottom-right-radius:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-right-radius:4px;  
  border-top-right-radius:4px;  
  background:#6e92c7;
}
ul.tagit li.tagit-choice:before {
 content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #6e92c7 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;  
}
ul.tagit li.tagit-choice:after {
 content:"";
  position:absolute;
  top:10px;
  left:0;
  float:left;
  width:4px;
  height:4px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:#fff;
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
}
input.tagit-hidden-field {
 display: none;
}
ul.tagit li.tagit-choice-read-only {
 padding: .2em .5em .2em .5em; 
}
ul.tagit li.tagit-choice-editable {
 padding: 4px 25px 0 12px;
}
ul.tagit li.tagit-new {
    padding: .25em 4px .25em 0;
}
ul.tagit li.tagit-choice a.tagit-label {
 cursor: pointer;
 text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-label:not(a) {
  color:#fff;
  font-size:13px;
  line-height:16px;
  font-weight: normal
}
ul.tagit li.tagit-choice a.tagit-close {
 text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
 right: .4em;
 top: 50%;
 margin-top: -8px;
 cursor: pointer;
 position: absolute;
 line-height: 12px;
}
ul.tagit li.tagit-choice .ui-icon {
 display: none;
}
/* used for some custom themes that don't need image icons */
ul.tagit li.tagit-choice .tagit-close .text-icon {
 display: inline;
 font-family: sans-serif;
 font-size: 13px;
 color: #FFF;
}
ul.tagit li.tagit-choice input {
 display: block;
 float: left;
 margin: 2px 5px 2px 0;
}
ul.tagit input[type="text"] {
  margin: 0;
  padding: 0;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  color: #333333;
  background: none;
  outline: none;
}
ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
 background-color: #555;
}
ul.tagit li.tagit-choice:hover::before {
  border-color:transparent #555 transparent transparent;
}
ul.tagit li.tagit-choice a.tagLabel:hover, ul.tagit li.tagit-choice a.tagit-close .text-icon:hover {
 color: #F00;
}
.ui-widget {
 font-size: 13px;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tag-it! Example</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
<form action="" method="POST">
  <ul id="allowSpacesTags"></ul>
  <input type="submit" />
 </form>

Is someone able to help me? Thank you for reading.

Sincerely

Bazi